/* Camisa 10 — estilos */
:root {
  --bg: #0E1A3A;
  --bg-2: #12224A;
  --surface: #172A57;
  --surface-2: #203668;
  --surface-3: #2A4580;
  --line: rgba(var(--fg), .09);
  --line-2: rgba(var(--fg), .16);
  --text: #F3F6FC;
  --muted: #A3B4DA;
  --dim: #7187B6;
  --gold: #FFC845;
  --gold-2: #FFD976;
  --gold-ink: #2B1F00;
  --acc: 255, 200, 69;
  --grass: #34C77B;
  --grass-2: #1E9E5C;
  --red: #FF5D62;
  --sky: #5AB0FF;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;
  --nav-h: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --fg: 255, 255, 255;
  --pop: #0A1430;
  --deep: #08122C;
  --glass: rgba(14, 26, 58, .86);
  --glass2: rgba(10, 19, 44, .94);
  --input: rgba(6, 14, 36, .55);
  --ok-ink: #8CE8B6;
  --bad-ink: #FFB3B6;
  --sky-ink: #A9D3FF;
  --gold-text: #FFC845;
  --gold-text-inv: #B07A00;
  --shadow: 0 14px 40px rgba(0,0,0,.45);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F2F4F9; --bg-2: #FFFFFF; --surface: #E8ECF5; --surface-2: #FFFFFF; --surface-3: #E1E6F2;
    --line: rgba(14, 26, 58, .10); --line-2: rgba(14, 26, 58, .18);
    --text: #0E1A3A; --muted: #4B5B82; --dim: #7886A6;
    --grass: #17A05C; --grass-2: #10804A; --red: #DE3F46; --sky: #2D7BDF;
    --fg: 14, 26, 58; --pop: #FFFFFF; --deep: #0E1A3A; --glass: rgba(242, 244, 249, .88); --glass2: rgba(255, 255, 255, .94); --input: #FFFFFF;
    --ok-ink: #0E7A45; --bad-ink: #B4262D; --sky-ink: #1D5FB4; --gold-text: #9A6A00; --gold-text-inv: #FFC845;
    --shadow: 0 14px 40px rgba(14,26,58,.14);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F2F4F9; --bg-2: #FFFFFF; --surface: #E8ECF5; --surface-2: #FFFFFF; --surface-3: #E1E6F2;
  --line: rgba(14, 26, 58, .10); --line-2: rgba(14, 26, 58, .18);
  --text: #0E1A3A; --muted: #4B5B82; --dim: #7886A6;
  --grass: #17A05C; --grass-2: #10804A; --red: #DE3F46; --sky: #2D7BDF;
  --fg: 14, 26, 58; --pop: #FFFFFF; --deep: #0E1A3A; --glass: rgba(242, 244, 249, .88); --glass2: rgba(255, 255, 255, .94); --input: #FFFFFF;
  --ok-ink: #0E7A45; --bad-ink: #B4262D; --sky-ink: #1D5FB4; --gold-text: #9A6A00; --gold-text-inv: #FFC845;
  --shadow: 0 14px 40px rgba(14,26,58,.14);
  color-scheme: light;
}

/* ---------- paletas de cor (Conta > Aparência ou botão de tema no topo) ---------- */
:root[data-accent="gramado"] { --gold: #C6F432; --gold-2: #DAFF73; --gold-ink: #172000; --acc: 198, 244, 50; --gold-text-inv: #C6F432; }
:root[data-accent="gramado"][data-mode="dark"] { --bg: #0A2117; --bg-2: #0E2A1D; --surface: #133626; --surface-2: #1A4432; --surface-3: #235640; --muted: #A9CFB9; --dim: #719E85; --glass: rgba(10, 33, 23, .88); --glass2: rgba(7, 26, 18, .95); --pop: #06180F; --deep: #04120A; --input: rgba(3, 14, 8, .55); --gold-text: #C6F432; }
:root[data-accent="gramado"][data-mode="light"] { --bg: #EEF5F0; --surface: #E1EEE5; --surface-3: #D4E6DA; --gold: #A8DB12; --gold-text: #4C7600; }
:root[data-accent="noite"] { --gold: #F2F2F2; --gold-2: #FFFFFF; --gold-ink: #111111; --acc: 242, 242, 242; --gold-text-inv: #F2F2F2; }
:root[data-accent="noite"][data-mode="dark"] { --bg: #0C0C0F; --bg-2: #131317; --surface: #1B1B21; --surface-2: #24242B; --surface-3: #2F2F38; --muted: #B5B5C1; --dim: #7E7E8C; --glass: rgba(12, 12, 15, .88); --glass2: rgba(8, 8, 10, .95); --pop: #08080A; --deep: #050506; --input: rgba(0, 0, 0, .45); --gold-text: #FFFFFF; }
:root[data-accent="noite"][data-mode="light"] { --bg: #F3F3F4; --surface: #E8E8EA; --surface-3: #DDDDE0; --gold: #141414; --gold-2: #2A2A2A; --gold-ink: #FFFFFF; --acc: 20, 20, 20; --gold-text: #141414; --gold-text-inv: #F2F2F2; }
:root[data-accent="rubro"] { --gold: #FF6A55; --gold-2: #FF8C7B; --gold-ink: #2A0505; --acc: 255, 106, 85; --gold-text-inv: #FF6A55; }
:root[data-accent="rubro"][data-mode="dark"] { --bg: #1F0A0E; --bg-2: #280E13; --surface: #34131A; --surface-2: #431923; --surface-3: #55202D; --muted: #E2B2BA; --dim: #A97780; --glass: rgba(31, 10, 14, .88); --glass2: rgba(24, 7, 10, .95); --pop: #170609; --deep: #110406; --input: rgba(14, 3, 5, .55); --gold-text: #FF8370; }
:root[data-accent="rubro"][data-mode="light"] { --bg: #F8F0F0; --surface: #F1E3E3; --surface-3: #EAD6D7; --gold: #E5482F; --gold-ink: #FFFFFF; --acc: 229, 72, 47; --gold-text: #B32B16; }
:root[data-accent="celeste"] { --gold: #5CE1E6; --gold-2: #8AEDF0; --gold-ink: #00292B; --acc: 92, 225, 230; --gold-text-inv: #5CE1E6; }
:root[data-accent="celeste"][data-mode="dark"] { --bg: #061C2B; --bg-2: #092435; --surface: #0D2E44; --surface-2: #123A54; --surface-3: #194968; --muted: #A2C7DD; --dim: #6B92AC; --glass: rgba(6, 28, 43, .88); --glass2: rgba(4, 21, 33, .95); --pop: #041624; --deep: #03111C; --input: rgba(2, 12, 20, .55); --gold-text: #5CE1E6; }
:root[data-accent="celeste"][data-mode="light"] { --bg: #EEF6F8; --surface: #E0EEF2; --surface-3: #D2E6EC; --gold: #1FB8C3; --gold-ink: #00292B; --acc: 31, 184, 195; --gold-text: #0A6F78; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background:
    radial-gradient(1200px 520px at 15% -10%, rgba(90, 176, 255, .14), transparent 60%),
    radial-gradient(900px 480px at 100% -5%, rgba(var(--acc), .08), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
a { color: var(--gold-text); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; line-height: 1.1; }
p { margin: 0; }
.ph, .ph-fill { line-height: 1; }

.display { font-family: var(--display); font-weight: 800; letter-spacing: .01em; }
.num { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.gold { color: var(--gold-text); }
.green { color: var(--grass); }
.red { color: var(--red); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- boot ---------- */
.boot { min-height: 100vh; display: grid; place-items: center; }
.boot-ball { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #cfd6e6); box-shadow: 0 10px 18px rgba(0,0,0,.35); animation: bounce .7s ease-in-out infinite alternate; }
@keyframes bounce { from { transform: translateY(-14px); } to { transform: translateY(10px); } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text);
  font-weight: 700; font-size: 15px; cursor: pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn .ph, .btn .ph-fill { font-size: 20px; }
.btn-primary { background: var(--gold); border-color: var(--gold-text); color: var(--gold-ink); }
.btn-primary:hover { background: var(--gold-2); }
.btn-green { background: var(--grass); border-color: var(--grass); color: #04210F; }
.btn-green:hover { background: #4AD68C; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: rgba(var(--fg), .05); color: var(--text); }
.btn-danger { background: transparent; border-color: rgba(255,93,98,.5); color: var(--red); }
.btn-block { width: 100%; }
.btn-lg { min-height: 56px; font-size: 17px; padding: 0 22px; border-radius: 14px; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.icon-btn { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--fg), .03); cursor: pointer; color: var(--muted); }
.icon-btn:hover { color: var(--text); background: rgba(var(--fg), .07); }
.icon-btn .ph { font-size: 22px; }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; color: var(--muted); }
.input, select.input {
  width: 100%; min-height: 50px; padding: 0 14px;
  background: var(--input); border: 1px solid var(--line-2); border-radius: var(--r-md);
  color: var(--text); font-size: 16px;
}
.input::placeholder { color: var(--dim); }
.input:focus { outline: none; border-color: var(--gold-text); box-shadow: 0 0 0 3px rgba(var(--acc), .18); }
.form { display: grid; gap: 16px; }
.form-error { background: rgba(255,93,98,.12); border: 1px solid rgba(255,93,98,.35); color: var(--bad-ink); padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.pass-wrap { position: relative; }
.pass-wrap .icon-btn { position: absolute; right: 4px; top: 4px; border: 0; background: transparent; }

/* ---------- auth ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
.auth-hero { position: relative; overflow: hidden; padding: 28px 20px 8px; }
.auth-hero .brand { display: flex; align-items: center; gap: 10px; }
.auth-hero .brand-mark { width: 38px; height: 38px; }
.auth-hero .brand-name { font-family: var(--display); font-weight: 900; font-size: 26px; letter-spacing: .02em; }
.auth-hero h1 { font-family: var(--display); font-weight: 900; font-size: clamp(44px, 12vw, 84px); line-height: .92; margin-top: 28px; max-width: 9ch; }
.auth-hero .lede { color: var(--muted); margin-top: 14px; max-width: 38ch; font-size: 17px; }
.auth-hero .hero-shirt { position: absolute; right: -36px; top: 70px; width: 210px; opacity: .95; transform: rotate(8deg); filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.auth-panel { padding: 20px 20px 40px; }
.auth-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; max-width: 440px; margin: 0 auto; }
.auth-card h2 { font-size: 22px; font-weight: 800; font-family: var(--body); }
.auth-card .sub { color: var(--muted); margin: 4px 0 18px; font-size: 15px; }
.auth-switch { text-align: center; margin-top: 16px; color: var(--muted); font-size: 15px; }
.auth-points { display: grid; gap: 10px; margin-top: 26px; max-width: 420px; }
.auth-points div { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 15px; }
.auth-points .ph { color: var(--gold-text); font-size: 20px; }
@media (min-width: 900px) {
  .auth { grid-template-columns: 1.1fr .9fr; }
  .auth-hero { padding: 56px 64px; display: flex; flex-direction: column; justify-content: center; }
  .auth-hero .hero-shirt { width: 360px; right: 20px; top: auto; bottom: 60px; }
  .auth-panel { display: grid; place-items: center; padding: 40px; }
  .auth-card { width: 100%; padding: 32px; }
}
@media (max-width: 620px) { .auth-hero .hero-shirt { display: none; } .auth-points { display: none; } }

/* ---------- shell ---------- */
.shell { min-height: 100vh; padding-bottom: calc(var(--nav-h) + var(--safe-b) + 12px); }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar .brand-mark { width: 30px; height: 30px; }
.topbar .brand-name { font-family: var(--display); font-weight: 900; font-size: 22px; display: none; }
.topbar .spacer { flex: 1; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(var(--fg), .06); border: 1px solid var(--line); font-family: var(--display); font-weight: 700; font-size: 17px; white-space: nowrap; }
.pill .ph-fill, .pill .ph { font-size: 17px; }
.pill.coin .ph-fill { color: var(--gold-text); }
.pill.energy .ph-fill { color: var(--grass); }
.pill.energy.low .ph-fill { color: var(--red); }
button.pill { cursor: pointer; }
.main { max-width: 1120px; margin: 0 auto; padding: 18px 16px 24px; }

.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  background: var(--glass2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.nav-item { display: grid; justify-items: center; gap: 3px; color: var(--dim); font-size: 12px; font-weight: 600; text-decoration: none; padding: 8px 0; }
.nav-item:hover { text-decoration: none; color: var(--muted); }
.nav-item .ph, .nav-item .ph-fill { font-size: 24px; }
.nav-item.active { color: var(--text); }
.nav-item.active .ph-fill { color: var(--gold-text); }
.nav-play { display: grid; place-items: center; }
.nav-play a { width: 58px; height: 58px; margin-top: -26px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; box-shadow: 0 8px 22px rgba(var(--acc), .35), 0 0 0 5px var(--bg); text-decoration: none; }
.nav-play a .ph-fill { font-size: 28px; }

.sidenav { display: none; }
@media (min-width: 960px) {
  .shell { padding-bottom: 0; padding-left: 240px; }
  .bottomnav { display: none; }
  .topbar .brand-mark, .topbar .brand-name { display: none; }
  .sidenav { display: flex; flex-direction: column; gap: 4px; position: fixed; left: 0; top: 0; bottom: 0; width: 240px; padding: 22px 14px; border-right: 1px solid var(--line); background: var(--glass2); z-index: 35; }
  .sidenav .brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 22px; }
  .sidenav .brand-mark { width: 34px; height: 34px; }
  .sidenav .brand-name { font-family: var(--display); font-weight: 900; font-size: 25px; }
  .side-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: var(--muted); font-weight: 600; text-decoration: none; }
  .side-item:hover { background: rgba(var(--fg), .05); color: var(--text); text-decoration: none; }
  .side-item .ph, .side-item .ph-fill { font-size: 21px; }
  .side-item.active { background: rgba(var(--fg), .07); color: var(--text); }
  .side-item.active .ph-fill { color: var(--gold-text); }
  .side-play { margin: 10px 0 14px; }
  .side-sep { height: 1px; background: var(--line); margin: 10px 8px; }
  .main { padding: 28px 32px 48px; }
}

/* ---------- layout bits ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { font-family: var(--display); font-weight: 900; font-size: 40px; letter-spacing: .01em; }
.page-head p { color: var(--muted); }
.grid { display: grid; gap: 16px; }
@media (min-width: 960px) {
  .grid-2 { grid-template-columns: 1.15fr .85fr; align-items: start; }
  .grid-2-even { grid-template-columns: 1fr 1fr; align-items: start; }
}
.stack { display: grid; gap: 16px; }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }

.panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.panel h2 { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.panel h2 .ph, .panel h2 .ph-fill { color: var(--muted); font-size: 20px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.panel-flush { padding: 0; overflow: hidden; }
.panel-flush .panel-head { padding: 16px 18px 0; }

/* bars */
.bar { position: relative; height: 10px; border-radius: 999px; background: rgba(var(--fg), .08); overflow: hidden; }
.bar > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--grass); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.bar.gold > i { background: var(--gold); }
.bar.sky > i { background: var(--sky); }
.bar.red > i { background: var(--red); }
.meter { display: grid; gap: 6px; }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--muted); font-weight: 600; }
.meter-top b { color: var(--text); font-family: var(--display); font-size: 18px; font-weight: 700; }

/* ---------- home: shirt hero ---------- */
.hero-card {
  position: relative; overflow: hidden;
  border-radius: 22px; padding: 20px;
  background: var(--team-c1, #233); color: var(--team-ink, #fff);
  isolation: isolate;
}
.hero-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, transparent 0 34px, rgba(255,255,255,.07) 34px 68px); }
.hero-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.42)); }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.club-tag { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; padding: 6px 10px 6px 6px; border-radius: 999px; background: rgba(0,0,0,.25); color: #fff; }
.club-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(var(--fg), .75); }
.ovr { text-align: center; background: rgba(0,0,0,.28); color: #fff; border-radius: 14px; padding: 6px 12px 8px; min-width: 70px; }
.ovr b { display: block; font-family: var(--display); font-weight: 900; font-size: 40px; line-height: 1; }
.ovr span { font-size: 12px; font-weight: 700; opacity: .85; }
.hero-body { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; margin-top: 6px; }
.hero-name { font-family: var(--display); font-weight: 900; font-size: clamp(38px, 10vw, 60px); line-height: .9; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.hero-meta { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.25); color: #fff; }
.tag .ph-fill, .tag .ph { font-size: 15px; }
.tag.star { background: var(--gold); color: var(--gold-ink); }
.hero-shirt { width: 128px; margin-right: -6px; margin-bottom: -10px; filter: drop-shadow(0 18px 22px rgba(0,0,0,.35)); }
@media (min-width: 960px) { .hero-card { padding: 26px; } .hero-shirt { width: 170px; } }

.vitals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vital { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 8px; }
.vital-top { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 600; }
.vital-top .ph-fill { font-size: 16px; }
.vital b { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; }

/* next match */
.match-card { position: relative; overflow: hidden; }
.match-card .comp { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 14px; font-weight: 600; }
.versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 16px 0 18px; }
.side { display: grid; justify-items: center; gap: 8px; text-align: center; }
.side .crest { width: 54px; height: 54px; }
.side b { font-weight: 800; font-size: 15px; line-height: 1.2; }
.side.mine b { color: var(--gold-text); }
.vs { font-family: var(--display); font-weight: 900; font-size: 22px; color: var(--dim); }
.callout { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(var(--fg), .04); border: 1px dashed var(--line-2); color: var(--muted); font-size: 14px; }
.callout .ph-fill, .callout .ph { font-size: 18px; color: var(--gold-text); margin-top: 1px; }

.kv { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; font-size: 15px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 700; text-align: right; display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.coin-ic { color: var(--gold-text); }

.statline { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; gap: 6px; }
.statline b { display: block; font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.1; }
.statline span { font-size: 12px; color: var(--muted); font-weight: 600; }

.news { display: grid; gap: 0; }
.news-item { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; }
.news-item:first-child { border-top: 0; }
.news-item .ph-fill, .news-item .ph { font-size: 20px; color: var(--muted); margin-top: 1px; }
.news-item small { display: block; color: var(--dim); font-size: 12px; }

/* ---------- skills ---------- */
.skill { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.skill:first-of-type { border-top: 0; }
.skill-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--fg), .06); }
.skill-ic .ph-fill { font-size: 22px; color: var(--sky); }
.skill-name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.skill-name b { font-size: 16px; }
.skill-name .val { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; }
.skill .hint { font-size: 13px; color: var(--dim); margin-top: 2px; }
.skill .bar { margin-top: 8px; height: 8px; }
.skill-actions { display: flex; gap: 6px; }
.train-left { display: flex; gap: 6px; }
.train-left i { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); }
.train-left i.off { background: rgba(var(--fg), .12); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: right; color: var(--dim); font-weight: 600; font-size: 12px; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.table th:nth-child(2), .table td:nth-child(2) { text-align: left; }
.table td { text-align: right; padding: 10px 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; }
.table td:first-child, .table th:first-child { text-align: center; width: 36px; }
.table tr.me td { background: rgba(var(--acc), .1); }
.table tr.me td:nth-child(2) { color: var(--gold-text); font-weight: 800; }
.table td.pts { font-weight: 800; font-family: var(--display); font-size: 17px; }
.team-cell { display: inline-flex; align-items: center; gap: 8px; }
.zone-up td:first-child { box-shadow: inset 3px 0 0 var(--grass); }
.zone-down td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.zone-champ td:first-child { box-shadow: inset 3px 0 0 var(--gold); }

.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer; }
.tab:hover { color: var(--text); }
.tab.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.tab .ph-fill { font-size: 14px; color: var(--gold-text); }
.tab.active .ph-fill { color: var(--gold-text-inv); }

.fixture { display: grid; grid-template-columns: 42px 1fr auto 1fr 28px; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.fixture:first-child { border-top: 0; }
.fixture .wk { color: var(--dim); font-size: 12px; font-weight: 700; }
.fixture .h { text-align: right; }
.fixture .sc { font-family: var(--display); font-weight: 800; font-size: 18px; min-width: 56px; text-align: center; padding: 2px 8px; border-radius: 8px; background: rgba(var(--fg), .05); }
.fixture.current { background: rgba(var(--acc), .08); border-radius: 10px; }
.res { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.res.W { background: var(--grass); color: #04210F; }
.res.D { background: #8794B4; color: #111a33; }
.res.L { background: var(--red); color: #2a0002; }
.me-name { color: var(--gold-text); font-weight: 800; }

/* ---------- life / shop ---------- */
.shop { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.shop-item { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 10px; align-content: start; }
.shop-item .ic { width: 46px; height: 46px; border-radius: 12px; background: rgba(var(--fg), .06); display: grid; place-items: center; }
.shop-item .ic .ph-fill { font-size: 24px; color: var(--text); }
.shop-item b { font-size: 15px; line-height: 1.25; }
.shop-item .eff { font-size: 13px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.shop-item.owned { border-color: rgba(52,199,123,.4); background: linear-gradient(180deg, rgba(52,199,123,.08), transparent); }
.shop-item.owned .ic .ph-fill { color: var(--grass); }
.activity { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.activity:first-child { border-top: 0; }
.activity .ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--fg), .06); display: grid; place-items: center; }
.activity .ic .ph-fill { font-size: 22px; color: var(--gold-text); }
.activity p { font-size: 13px; color: var(--muted); }
.activity .cost { font-size: 13px; color: var(--dim); display: flex; gap: 10px; margin-top: 2px; }

/* ---------- achievements ---------- */
.achs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ach { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); }
.ach .ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--fg), .06); color: var(--dim); }
.ach.on .ic { background: var(--gold); color: var(--gold-ink); }
.ach .ic .ph-fill { font-size: 20px; }
.ach b { font-size: 15px; display: block; }
.ach span { font-size: 13px; color: var(--muted); }
.ach:not(.on) b { color: var(--muted); }

/* ---------- ranking ---------- */
.rank-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); }
.rank-row.me { background: rgba(var(--acc), .08); }
.rank-pos { font-family: var(--display); font-weight: 900; font-size: 22px; color: var(--dim); text-align: center; }
.rank-row:nth-child(-n+3) .rank-pos { color: var(--gold-text); }
.rank-row b { display: block; }
.rank-row small { color: var(--muted); font-size: 13px; }
.rank-val { text-align: right; font-family: var(--display); font-weight: 800; font-size: 24px; }
.rank-val small { display: block; font-family: var(--body); font-size: 11px; font-weight: 600; color: var(--dim); }

/* ---------- creation ---------- */
.create { max-width: 980px; margin: 0 auto; padding: 22px 16px 120px; }
.create-grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .create-grid { grid-template-columns: 340px 1fr; align-items: start; } .preview { position: sticky; top: 24px; } }
.preview { border-radius: 22px; padding: 22px; background: var(--team-c1, #1E9E5C); position: relative; overflow: hidden; isolation: isolate; text-align: center; }
.preview::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, transparent 0 34px, rgba(255,255,255,.07) 34px 68px), linear-gradient(180deg, transparent 40%, rgba(0,0,0,.35)); }
.preview svg { width: 220px; margin: 0 auto; filter: drop-shadow(0 20px 26px rgba(0,0,0,.35)); }
.preview .pv-name { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; color: #fff; margin-top: 10px; }
.preview .pv-meta { color: rgba(var(--fg), .85); font-size: 14px; font-weight: 600; margin-top: 6px; }
.choice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.choice { border: 1px solid var(--line-2); background: rgba(var(--fg), .03); border-radius: 12px; padding: 12px 10px; text-align: left; cursor: pointer; display: grid; gap: 2px; }
.choice b { font-size: 15px; }
.choice span { font-size: 12px; color: var(--muted); line-height: 1.3; }
.choice.active { border-color: var(--gold-text); background: rgba(var(--acc), .1); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 38px; height: 38px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(0,0,0,.15); }
.swatch.active { border-color: var(--gold-text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold); }
.points-left { display: flex; align-items: baseline; gap: 8px; }
.points-left b { font-family: var(--display); font-weight: 900; font-size: 34px; color: var(--gold-text); line-height: 1; }
.stepper { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.stepper:first-child { border-top: 0; }
.stepper .ctrl { display: flex; align-items: center; gap: 8px; }
.stepper .ctrl .num { width: 34px; text-align: center; font-size: 24px; }
.stepper small { display: block; color: var(--dim); font-size: 13px; }
.create-foot { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + var(--safe-b)); background: var(--glass2); border-top: 1px solid var(--line); backdrop-filter: blur(12px); z-index: 20; }
.create-foot .inner { max-width: 980px; margin: 0 auto; display: flex; justify-content: flex-end; }

/* ---------- match ---------- */
.match-screen { max-width: 760px; margin: 0 auto; }
.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; background: var(--deep); border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
.sb-team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sb-team.away { flex-direction: row-reverse; text-align: right; }
.sb-team .crest { width: 38px; height: 38px; flex: none; }
.sb-team b { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; }
.sb-team small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-mid { text-align: center; }
.sb-score { font-family: var(--display); font-weight: 900; font-size: 46px; line-height: 1; font-variant-numeric: tabular-nums; }
.sb-clock { display: inline-block; margin-top: 4px; font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--deep); background: var(--grass); border-radius: 6px; padding: 0 8px; }
.sb-clock.paused { background: var(--gold); }
.feed { margin-top: 12px; display: grid; gap: 6px; max-height: 52vh; overflow-y: auto; padding-right: 2px; }
.feed-item { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); font-size: 15px; animation: feedIn .25s ease-out; }
@keyframes feedIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.feed-item .m { font-family: var(--display); font-weight: 800; color: var(--dim); font-size: 17px; }
.feed-item.goal { background: rgba(52,199,123,.12); border-color: rgba(52,199,123,.35); font-weight: 700; }
.feed-item.goal.opp { background: rgba(255,93,98,.1); border-color: rgba(255,93,98,.3); }
.feed-item.mine { background: rgba(var(--acc), .12); border-color: rgba(var(--acc), .4); font-weight: 700; }
.feed-item.half { background: transparent; border-style: dashed; color: var(--muted); }
.match-controls { display: flex; gap: 8px; margin-top: 12px; }
.match-controls .btn { flex: 1; }

.pitch-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(4, 10, 26, .97); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; padding-top: max(12px, env(safe-area-inset-top)); animation: fadeIn .2s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.pitch-wrap { position: relative; width: 100%; max-width: 560px; }
.pitch-wrap canvas { width: 100%; height: auto; border-radius: 16px; touch-action: none; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.pitch-hud { width: 100%; max-width: 560px; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.pitch-hud .title { font-weight: 800; font-size: 16px; }
.pitch-hud .title small { display: block; color: var(--muted); font-weight: 600; font-size: 13px; }
.pitch-help { width: 100%; max-width: 560px; margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.pitch-banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-family: var(--display); font-weight: 900; font-size: clamp(44px, 12vw, 78px); color: #fff; text-shadow: 0 4px 0 rgba(0,0,0,.35), 0 0 40px rgba(0,0,0,.5); pointer-events: none; white-space: nowrap; animation: pop .35s cubic-bezier(.2,1.4,.4,1); }
.pitch-banner.good { color: var(--gold-text); }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

.result { text-align: center; }
.result .final { font-family: var(--display); font-weight: 900; font-size: 64px; line-height: 1; }
.result .verdict { font-weight: 800; font-size: 18px; margin-top: 4px; }
.rating-ring { width: 120px; height: 120px; margin: 18px auto 8px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ring, var(--gold)) calc(var(--p) * 1%), rgba(var(--fg), .08) 0); }
.rating-ring > div { width: 98px; height: 98px; border-radius: 50%; background: var(--bg-2); display: grid; place-items: center; }
.rating-ring b { font-family: var(--display); font-weight: 900; font-size: 44px; line-height: 1; }
.rating-ring span { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: -14px; }
.motm { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: var(--gold-ink); font-weight: 800; padding: 8px 14px; border-radius: 999px; }
.gains { display: grid; gap: 8px; margin-top: 16px; text-align: left; }
.gain { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background: rgba(var(--fg), .04); font-size: 15px; }
.gain b { font-family: var(--display); font-size: 18px; }

/* ---------- offers ---------- */
.offer { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-2); }
.offer.locked { border-color: rgba(var(--acc), .45); background: linear-gradient(135deg, rgba(var(--acc), .08), transparent 60%), var(--bg-2); }
.offer .crest { width: 48px; height: 48px; }
.offer b { font-size: 17px; display: block; }
.offer .terms { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin-top: 2px; }

/* ---------- modal / toast ---------- */
.modal-back { position: fixed; inset: 0; z-index: 100; background: rgba(3, 8, 22, .72); display: grid; place-items: end center; padding: 0; animation: fadeIn .15s ease-out; }
.modal { width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 22px 22px 0 0; padding: 22px 20px calc(22px + var(--safe-b)); animation: sheetUp .25s cubic-bezier(.2,.9,.3,1); }
@keyframes sheetUp { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) { .modal-back { place-items: center; padding: 20px; } .modal { border-radius: 22px; } }
.modal h3 { font-size: 22px; font-weight: 800; }
.modal .sub { color: var(--muted); margin-top: 6px; }
.modal-actions { display: grid; gap: 8px; margin-top: 20px; }

.premium-art { height: 130px; border-radius: 16px; margin-bottom: 18px; position: relative; overflow: hidden; background: linear-gradient(135deg, #1B2F6B, #0B1532); display: grid; place-items: center; }
.premium-art .ph-fill { font-size: 64px; color: var(--gold-text); position: relative; }
.premium-art::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(var(--acc), .08) 22px 44px); }
.perks { display: grid; gap: 10px; margin-top: 16px; }
.perks div { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.perks .ph-fill { color: var(--grass); font-size: 20px; margin-top: 1px; }

#toasts { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 200; display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--pop); border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: 15px; font-weight: 600; animation: toastIn .25s ease-out; pointer-events: auto; }
.toast .ph-fill { font-size: 22px; flex: none; }
.toast.ok .ph-fill { color: var(--grass); }
.toast.err .ph-fill { color: var(--red); }
.toast.ach { border-color: rgba(var(--acc), .5); }
.toast.ach .ph-fill { color: var(--gold-text); }
.toast small { display: block; color: var(--muted); font-weight: 500; font-size: 13px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.empty { text-align: center; padding: 30px 10px; color: var(--muted); }
.empty .ph { font-size: 40px; color: var(--dim); }
.empty p { margin-top: 8px; }

.skeleton { border-radius: 14px; background: linear-gradient(90deg, rgba(var(--fg), .04), rgba(var(--fg), .08), rgba(var(--fg), .04)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.menu-pop { position: absolute; right: 12px; top: 58px; min-width: 220px; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--pop); border: 1px solid var(--line-2); border-radius: 14px; padding: 6px; box-shadow: var(--shadow); z-index: 60; animation: fadeIn .12s ease-out; }
.menu-pop a, .menu-pop button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; color: var(--text); background: none; border: 0; cursor: pointer; font-weight: 600; font-size: 15px; text-decoration: none; text-align: left; }
.menu-pop a:hover, .menu-pop button:hover { background: rgba(var(--fg), .06); text-decoration: none; }
.menu-pop .ph { font-size: 20px; color: var(--muted); }
.menu-pop .who { padding: 10px 12px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu-pop .who small { display: block; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.crest-sm { width: 24px; height: 24px; flex: none; }

.create .brand-mark { width: 36px; height: 36px; }

/* ======================= v2 ======================= */
.ph-duotone { line-height: 1; }
.ph-duotone:before { opacity: 1; }
.badge { margin-left: auto; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 7px; }
.bell { position: relative; }
.bell .dot { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }
.topbar .icon-btn .ph-duotone { font-size: 22px; color: var(--muted); }
.pill.coin .ph-fill { color: var(--gold-text); }
.side-item .ph-duotone, .nav-item .ph-duotone { font-size: 22px; }
.nav-item .ph-duotone { font-size: 24px; }
.panel h2 .ph-duotone { color: var(--gold-text); font-size: 21px; }

/* avatar */
.avatar { display: block; height: auto; }
.hero-avatar { display: block; width: 116px; margin: -6px -4px -14px 0; filter: drop-shadow(0 14px 18px rgba(0,0,0,.35)); transition: transform .2s; }
.hero-avatar:hover { transform: translateY(-3px) rotate(-1deg); }
.hero-avatar svg { width: 100%; height: auto; }
@media (min-width: 960px) { .hero-avatar { width: 150px; } }
.hero-value { margin-top: 12px; display: inline-flex; flex-direction: column; background: rgba(0,0,0,.25); border-radius: 12px; padding: 6px 12px; color: #fff; }
.hero-value span { font-size: 12px; font-weight: 600; opacity: .85; }
.hero-value b { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.1; }
.crest { width: 54px; height: 62px; flex: none; }
.crest-sm { width: 22px; height: 26px; flex: none; }
.crest-xs { width: 18px; height: 21px; flex: none; }
.club-tag { padding: 5px 12px 5px 8px; }
.side .crest { width: 54px; height: 62px; }
.sb-team .crest { width: 36px; height: 42px; }
.offer .crest { width: 44px; height: 52px; }

.preview .pv-stage { display: grid; place-items: center; padding: 6px 0 0; }
.preview .pv-avatar { width: 170px; height: auto; filter: drop-shadow(0 18px 24px rgba(0,0,0,.35)); }
.look { display: grid; gap: 4px; }
.look-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.look-row:first-child { border-top: 0; }
.look-label { color: var(--muted); font-size: 14px; font-weight: 600; }
.look-ctrl { display: flex; align-items: center; gap: 6px; }
.look-ctrl .icon-btn { width: 36px; height: 36px; }
.look-val { min-width: 120px; text-align: center; font-weight: 700; font-size: 14px; display: inline-flex; justify-content: center; }
.sw { display: inline-block; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0,0,0,.2), 0 0 0 2px rgba(var(--fg), .15); }

.auth-hero .hero-squad { position: absolute; right: 24px; bottom: 30px; display: flex; align-items: flex-end; gap: 0; }
.hero-squad .sq { width: 120px; height: auto; filter: drop-shadow(0 20px 24px rgba(0,0,0,.45)); }
.hero-squad .sq2 { width: 150px; margin: 0 -18px; position: relative; z-index: 2; }
@media (max-width: 899px) { .auth-hero .hero-squad { position: static; justify-content: center; margin-top: 22px; } .hero-squad .sq { width: 90px; } .hero-squad .sq2 { width: 112px; } }
@media (min-width: 900px) and (max-width: 1500px) { .auth-hero .hero-squad { position: static; margin-top: 28px; } }

/* evento */
.event-card { border-color: rgba(var(--acc), .45); background: linear-gradient(135deg, rgba(var(--acc), .10), transparent 55%), var(--bg-2); }
.event-card h3 { font-size: 19px; font-weight: 800; margin: 8px 0 4px; }
.event-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: rgba(var(--fg), .07); color: var(--muted); }
.event-tag .ph-duotone { font-size: 17px; color: var(--gold-text); }
.event-tag.cat-escandalo { background: rgba(255,93,98,.15); color: var(--bad-ink); }
.event-tag.cat-escandalo .ph-duotone { color: var(--red); }
.event h3 { font-size: 24px; margin-top: 12px; }
.event-body { color: var(--muted); margin-top: 8px; font-size: 16px; line-height: 1.55; }
.choices { display: grid; gap: 10px; margin-top: 18px; }
.choice-btn { text-align: left; border: 1px solid var(--line-2); background: rgba(var(--fg), .04); border-radius: 14px; padding: 14px; cursor: pointer; display: grid; gap: 8px; color: var(--text); transition: border-color .15s, background .15s; }
.choice-btn:hover { border-color: var(--gold-text); background: rgba(var(--acc), .06); }
.choice-btn[disabled] { opacity: .5; cursor: wait; }
.choice-btn b { font-size: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.chip.good { background: rgba(52,199,123,.15); color: var(--ok-ink); }
.chip.bad { background: rgba(255,93,98,.15); color: var(--bad-ink); }
.callout.danger { border-color: rgba(255,93,98,.45); background: rgba(255,93,98,.08); color: var(--bad-ink); }
.callout.danger .ph-fill { color: var(--red); }
.tag-soft { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(var(--fg), .07); color: var(--text); }

/* bônus diário */
.daily-head { display: flex; gap: 14px; align-items: center; }
.daily-head > .ph-duotone { font-size: 46px; color: var(--gold-text); }
.daily-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 18px; }
.daily-day { display: grid; justify-items: center; gap: 4px; padding: 8px 0; border-radius: 10px; background: rgba(var(--fg), .04); border: 1px solid var(--line); font-size: 11px; color: var(--dim); font-weight: 700; }
.daily-day .ph-duotone { font-size: 20px; }
.daily-day.past { color: var(--grass); border-color: rgba(52,199,123,.3); }
.daily-day.today { border-color: var(--gold-text); background: rgba(var(--acc), .12); color: var(--gold-text); }
.daily-prize { text-align: center; margin-top: 18px; }
.daily-prize b { display: block; font-family: var(--display); font-weight: 900; font-size: 44px; color: var(--gold-text); line-height: 1; }
.daily-prize span { color: var(--muted); font-weight: 700; }

/* jornal */
.news-list { display: grid; gap: 12px; max-width: 760px; }
.news-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.news-card.hot { border-color: rgba(255,93,98,.45); background: linear-gradient(135deg, rgba(255,93,98,.10), transparent 60%), var(--bg-2); }
.news-card h3 { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.05; margin: 10px 0 8px; letter-spacing: .005em; }
.news-card p { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 68ch; }
.news-card p + p { margin-top: 8px; }
.news-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.kind { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.kind .ph-duotone { font-size: 15px; }
.k-red { background: rgba(255,93,98,.15); color: var(--bad-ink); }
.k-gold { background: rgba(var(--acc), .14); color: var(--gold-text); }
.k-green { background: rgba(52,199,123,.14); color: var(--ok-ink); }
.k-sky { background: rgba(90,176,255,.14); color: var(--sky-ink); }
.news-who { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); }
.news-head { width: 22px; height: 24px; border-radius: 6px; background: rgba(var(--fg), .06); }
.news-mini { display: grid; }
.news-row { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.news-row:first-child { border-top: 0; }
.news-row:hover { text-decoration: none; }
.news-row:hover b { color: var(--gold-text); }
.news-row .ph-duotone { font-size: 21px; color: var(--gold-text); margin-top: 1px; }
.news-row b { font-size: 15px; line-height: 1.3; display: block; }
.news-row small { color: var(--dim); font-size: 12px; }

/* loja */
.shop { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.shop-item .ic .ph-duotone { font-size: 26px; color: var(--sky); }
.shop-item.owned .ic .ph-duotone { color: var(--grass); }
.shop-item .brand { display: block; font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .02em; }
.shop-item .price { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; }
.shop-item.far { opacity: .62; }
.activity .ic .ph-duotone { font-size: 22px; color: var(--gold-text); }
.skill-ic .ph-duotone { font-size: 24px; color: var(--sky); }

/* ranking */
.rank-row { grid-template-columns: 30px 40px 1fr auto; }
.rank-av { width: 40px; height: 44px; border-radius: 10px; background: rgba(var(--fg), .05); display: grid; place-items: center; overflow: hidden; }
.rank-head { width: 36px; height: 40px; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 10px; margin-bottom: 16px; }
.pod { display: grid; justify-items: center; text-align: center; gap: 2px; }
.pod-av { width: 84px; height: auto; filter: drop-shadow(0 12px 16px rgba(0,0,0,.35)); margin-bottom: -6px; }
.pod.p1 .pod-av { width: 104px; }
.pod b { font-size: 14px; line-height: 1.2; margin-top: 8px; }
.pod small { color: var(--muted); font-size: 12px; }
.pod-val { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--gold-text); }
.pod-step { width: 100%; border-radius: 12px 12px 0 0; background: var(--surface); font-family: var(--display); font-weight: 900; font-size: 28px; color: var(--dim); padding: 8px 0; margin-top: 6px; }
.pod.p1 .pod-step { background: var(--gold); color: var(--gold-ink); padding: 18px 0; }
.pod.p2 .pod-step { padding: 12px 0; }

/* master */
.master { min-height: 100vh; }
.m-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--glass2); border-bottom: 1px solid var(--line); }
.m-top .brand-mark { width: 28px; height: 28px; }
.m-top .spacer { flex: 1; }
.m-body { display: grid; grid-template-columns: 1fr; }
.m-nav { display: flex; gap: 4px; overflow-x: auto; padding: 10px 12px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.m-nav a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: none; }
.m-nav a:hover { background: rgba(var(--fg), .05); color: var(--text); text-decoration: none; }
.m-nav a.active { background: rgba(var(--acc), .12); color: var(--gold-text); }
.m-nav .ph-duotone { font-size: 19px; }
.m-main { padding: 18px 16px 60px; min-width: 0; }
@media (min-width: 960px) {
  .m-body { grid-template-columns: 230px 1fr; }
  .m-nav { flex-direction: column; border-bottom: 0; border-right: 1px solid var(--line); min-height: calc(100vh - 57px); padding: 16px 12px; position: sticky; top: 57px; align-self: start; }
  .m-main { padding: 26px 30px 60px; }
}
.m-h1 { font-family: var(--display); font-weight: 900; font-size: 34px; margin-bottom: 14px; }
.m-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.m-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.m-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.m-stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 2px; }
.m-stat .ph-duotone { font-size: 24px; color: var(--gold-text); }
.m-stat b { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1.1; }
.m-stat span { color: var(--muted); font-size: 13px; font-weight: 600; }
.m-table td, .m-table th { text-align: left !important; }
.m-table td:first-child, .m-table th:first-child { width: auto; }
.m-table .ph-duotone { font-size: 20px; color: var(--sky); }
.m-act { text-align: right !important; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--gold-text); }
textarea.input, .ta { min-height: 90px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.help { display: block; line-height: 1.45; margin-top: 2px; }
.color-in { display: flex; gap: 8px; }
.color-in input[type=color] { width: 50px; height: 50px; border: 1px solid var(--line-2); border-radius: 12px; background: none; padding: 4px; cursor: pointer; }
.icon-in { display: flex; gap: 8px; align-items: center; }
.icon-pv { width: 50px; height: 50px; flex: none; border-radius: 12px; background: rgba(var(--fg), .06); display: grid; place-items: center; }
.icon-pv .ph-duotone { font-size: 26px; color: var(--sky); }
.kit-pv { display: flex; align-items: flex-end; justify-content: center; gap: 18px; padding: 12px; border-radius: 14px; background: rgba(var(--fg), .04); margin-top: 12px; }
.kit-pv .kit-av { width: 80px; height: auto; }
.modal { max-width: 560px; }

/* ======================= v3 ======================= */
.scoreboard { color: #fff; }
.scoreboard small { color: rgba(255,255,255,.7) !important; }
:root[data-theme="light"] .hero-squad .sq, :root[data-theme="light"] .pv-avatar { filter: drop-shadow(0 14px 18px rgba(14,26,58,.25)); }

/* notificação estilo celular */
#notify { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 210; width: min(94vw, 420px); display: grid; gap: 8px; pointer-events: none; }
.phone-note { pointer-events: auto; display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px;
  background: var(--pop); border: 1px solid var(--line-2); box-shadow: var(--shadow); animation: noteIn .35s cubic-bezier(.2,1.2,.4,1); cursor: pointer; }
@keyframes noteIn { from { transform: translateY(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
.phone-note .app-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--grass); color: #fff; }
.phone-note .app-ic .ph-fill { font-size: 22px; }
.phone-note.hot .app-ic { background: var(--red); }
.phone-note b { font-size: 14px; display: block; }
.phone-note span { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.phone-note small { color: var(--dim); font-size: 11px; align-self: start; }

/* celular */
.phone { max-width: 560px; margin: 0 auto; background: var(--bg-2); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; }
.phone-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.phone-top b { font-size: 17px; }
.thread-row { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.thread-row:hover { background: rgba(var(--fg), .04); text-decoration: none; }
.thread-row:first-child { border-top: 0; }
.th-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: #fff; }
.th-av .ph-fill { font-size: 22px; }
.thread-row b { display: block; font-size: 15px; }
.thread-row span { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.thread-row .when { font-size: 11px; color: var(--dim); text-align: right; display: grid; gap: 4px; justify-items: end; }
.unread-dot { min-width: 20px; height: 20px; border-radius: 999px; background: var(--grass); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 6px; }
.chat { display: flex; flex-direction: column; gap: 8px; padding: 16px; min-height: 50vh; max-height: 64vh; overflow-y: auto; background: rgba(var(--fg), .02); }
.bubble { max-width: 82%; padding: 10px 13px; border-radius: 18px 18px 18px 6px; background: var(--surface); font-size: 15px; line-height: 1.45; align-self: flex-start; }
.bubble.me { align-self: flex-end; background: var(--grass); color: #fff; border-radius: 18px 18px 6px 18px; }
.bubble small { display: block; font-size: 11px; color: var(--dim); margin-top: 4px; }
.bubble.me small { color: rgba(255,255,255,.75); }
.replies { display: grid; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.reply-btn { text-align: left; border: 1px solid var(--grass); color: var(--text); background: transparent; border-radius: 16px; padding: 10px 14px; cursor: pointer; font-weight: 700; display: grid; gap: 6px; }
.reply-btn:hover { background: rgba(23,160,92,.08); }

/* pré-jogo e partida */
.prematch { max-width: 760px; margin: 0 auto; display: grid; gap: 16px; }
.pm-head { text-align: center; padding: 22px 18px; border-radius: 22px; background: var(--deep); color: #fff; position: relative; overflow: hidden; }
.pm-head::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 30px, rgba(255,255,255,.05) 30px 60px); }
.pm-comp { position: relative; font-weight: 800; color: #FFC845; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }
.pm-round { position: relative; color: rgba(255,255,255,.75); font-size: 13px; margin-top: 2px; }
.pm-vs { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 16px; }
.pm-vs .side b { color: #fff; }
.pm-vs .crest { width: 66px; height: 76px; }
.pm-vs .vs { color: rgba(255,255,255,.5); }
.form-row { display: flex; gap: 4px; justify-content: center; margin-top: 6px; }
.intensity { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.int-btn { border: 1px solid var(--line-2); background: rgba(var(--fg), .03); border-radius: 14px; padding: 12px 10px; cursor: pointer; text-align: left; display: grid; gap: 4px; color: var(--text); }
.int-btn .ph-duotone { font-size: 24px; color: var(--gold-text); }
.int-btn b { font-size: 15px; }
.int-btn span { font-size: 12px; color: var(--muted); line-height: 1.35; }
.int-btn.active { border-color: var(--gold); background: rgba(var(--acc), .1); }
.live-stats { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; align-items: center; font-size: 13px; margin-top: 10px; padding: 10px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; }
.live-stats .lbl { text-align: center; color: var(--muted); font-weight: 600; }
.live-stats b { font-family: var(--display); font-size: 17px; }
.posbar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; display: flex; }
.posbar i { background: var(--gold); }
.halftime { text-align: center; }
.halftime .ht-score { font-family: var(--display); font-weight: 900; font-size: 56px; line-height: 1; }
.ht-stats { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px 14px; margin: 18px 0; font-size: 15px; }
.ht-stats .c { color: var(--muted); }
.ht-stats b { font-family: var(--display); font-size: 20px; }
.cup-banner { margin-top: 14px; padding: 12px 14px; border-radius: 14px; font-weight: 800; display: flex; gap: 10px; align-items: center; justify-content: center; }
.cup-banner.good { background: rgba(23,160,92,.14); color: var(--ok-ink); }
.cup-banner.bad { background: rgba(222,63,70,.12); color: var(--bad-ink); }
.cup-banner.gold { background: var(--gold); color: var(--gold-ink); font-size: 18px; }

/* competições / chave */
.bracket { display: grid; gap: 16px; }
.b-round h3 { font-size: 14px; font-weight: 800; color: var(--muted); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.b-ties { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tie { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; display: grid; gap: 4px; }
.tie.mine { border-color: var(--gold); }
.tie-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; font-size: 14px; }
.tie-row.win { font-weight: 800; }
.tie-row.lose { color: var(--dim); }
.tie-row.me { color: var(--gold-text); }
.tie small { color: var(--dim); font-size: 12px; }

/* troféus */
.trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.trophy { text-align: center; padding: 16px 10px; border-radius: 16px; background: linear-gradient(180deg, rgba(var(--acc), .14), transparent 70%), var(--bg-2); border: 1px solid rgba(var(--acc), .35); }
.trophy .ph-duotone { font-size: 44px; color: var(--gold-text); }
.trophy.award { background: linear-gradient(180deg, rgba(45,123,223,.12), transparent 70%), var(--bg-2); border-color: rgba(45,123,223,.3); }
.trophy.award .ph-duotone { color: var(--sky); }
.trophy b { display: block; font-size: 14px; margin-top: 8px; line-height: 1.25; }
.trophy small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

/* amor */
.love-card { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.love-av { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #FF6B9A, #FFB36B); display: grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 900; font-size: 28px; }
.love-card b { font-size: 18px; display: block; }
.bar.pink > i { background: linear-gradient(90deg, #FF6B9A, #FFB36B); }
.pref-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }

/* cassino */
.casino { display: grid; gap: 16px; }
.slot-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 16px; }
.reel { aspect-ratio: 1; border-radius: 18px; background: var(--deep); border: 3px solid var(--gold); display: grid; place-items: center; color: #FFC845; }
.reel .ph-duotone { font-size: 56px; }
.reel.spin .ph-duotone { animation: spin .12s linear infinite; }
@keyframes spin { 0% { transform: translateY(-8px); opacity: .4; } 100% { transform: translateY(8px); opacity: 1; } }
.bet-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bet-row .input { max-width: 180px; }
.wheel { width: 160px; height: 160px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#0E7A45 0 10deg, #DE3F46 10deg 20deg, #1b1f2e 20deg 30deg, #DE3F46 30deg 40deg, #1b1f2e 40deg 50deg, #DE3F46 50deg 60deg, #1b1f2e 60deg 70deg, #DE3F46 70deg 80deg, #1b1f2e 80deg 90deg, #DE3F46 90deg 100deg, #1b1f2e 100deg 110deg, #DE3F46 110deg 120deg, #1b1f2e 120deg 130deg, #DE3F46 130deg 140deg, #1b1f2e 140deg 150deg, #DE3F46 150deg 160deg, #1b1f2e 160deg 170deg, #DE3F46 170deg 180deg, #1b1f2e 180deg 190deg, #DE3F46 190deg 200deg, #1b1f2e 200deg 210deg, #DE3F46 210deg 220deg, #1b1f2e 220deg 230deg, #DE3F46 230deg 240deg, #1b1f2e 240deg 250deg, #DE3F46 250deg 260deg, #1b1f2e 260deg 270deg, #DE3F46 270deg 280deg, #1b1f2e 280deg 290deg, #DE3F46 290deg 300deg, #1b1f2e 300deg 310deg, #DE3F46 310deg 320deg, #1b1f2e 320deg 330deg, #DE3F46 330deg 340deg, #1b1f2e 340deg 350deg, #DE3F46 350deg 360deg); transition: transform 2.4s cubic-bezier(.15,.8,.2,1); }
.wheel-wrap { position: relative; }
.wheel-num { position: absolute; left: 50%; top: 80px; transform: translate(-50%, -50%); width: 70px; height: 70px; border-radius: 50%; background: var(--bg-2); display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 30px; border: 3px solid var(--gold); }
.rbets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rbets .btn { min-height: 40px; padding: 0 8px; font-size: 13px; }
.rbets .btn.active { outline: 2px solid var(--gold); }
.btn-red { background: #DE3F46; border-color: #DE3F46; color: #fff; }
.btn-black { background: #1b1f2e; border-color: #1b1f2e; color: #fff; }
.btn-greenr { background: #0E7A45; border-color: #0E7A45; color: #fff; }
.cards { display: flex; gap: 8px; justify-content: center; min-height: 96px; margin: 6px 0; flex-wrap: wrap; }
.card { width: 64px; height: 92px; border-radius: 10px; background: #fff; color: #111; border: 1px solid #ccd; display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 26px; box-shadow: 0 6px 14px rgba(0,0,0,.18); position: relative; animation: pop .3s; }
.card.red { color: #D21F2B; }
.card.back { background: repeating-linear-gradient(45deg, #1F3B8C 0 6px, #2a4aa8 6px 12px); color: transparent; }
.card small { position: absolute; top: 4px; left: 6px; font-size: 13px; }
.bj-total { text-align: center; color: var(--muted); font-weight: 700; }
.casino-note { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; }

/* premium */
.premium-hero { border-radius: 24px; padding: 28px 22px; background: linear-gradient(135deg, #1B2F6B, #0B1532); color: #fff; position: relative; overflow: hidden; }
.premium-hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 26px, rgba(var(--acc), .08) 26px 52px); }
.premium-hero > * { position: relative; }
.premium-hero h1 { font-family: var(--display); font-weight: 900; font-size: 46px; color: #FFC845; }
.premium-hero p { color: rgba(255,255,255,.8); max-width: 46ch; margin-top: 6px; }
.perk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.perk { padding: 16px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); display: grid; gap: 6px; }
.perk .ph-duotone { font-size: 30px; color: var(--gold-text); }
.perk b { font-size: 16px; }
.perk span { font-size: 14px; color: var(--muted); }
.lock-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: var(--gold-text); }
.look-val.locked { opacity: .55; }
.theme-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.phone-cta { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; color: var(--text); text-decoration: none; }
.phone-cta:hover { text-decoration: none; border-color: var(--grass); }
.phone-cta > .ph-duotone { font-size: 32px; color: var(--grass); }
.phone-cta b { display: block; }
.phone-cta span { font-size: 14px; color: var(--muted); }
.comp .ph-duotone { color: var(--gold-text); font-size: 16px; vertical-align: -2px; }
h3.sec { font-size: 15px; font-weight: 800; color: var(--muted); margin: 6px 0 10px; }
.feed-item.ycard { border-left: 3px solid #F2C200; }

/* ===================== v4: tema, mercado, patrocínios ===================== */
.theme-pick { display: grid; gap: 10px; }
.tp-label { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(var(--fg), .05); border: 1px solid var(--line); }
.seg button { flex: 1; min-height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--gold); color: var(--gold-ink); }
.tp-sw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tp-btn { display: grid; justify-items: center; gap: 6px; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.tp-btn i { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(var(--fg), .15); display: block; }
.tp-btn:hover { color: var(--text); border-color: var(--line-2); }
.tp-btn.active { border-color: var(--gold-text); color: var(--text); background: rgba(var(--acc), .1); }
.theme-pop { width: min(340px, calc(100vw - 24px)); padding: 6px 12px 14px; }
.theme-pop .who { margin: 0 -6px 10px; }

.pitch-left { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.pitch-left > .ph-duotone { font-size: 28px; color: var(--gold-text); }
.pitch-left b { display: block; font-size: 18px; line-height: 1.1; }
.pitch-left span { font-size: 12.5px; color: var(--muted); }
.callout.good { border-color: rgba(52,199,123,.45); background: rgba(52,199,123,.08); }
.callout.good .ph-fill, .callout.good .ph { color: var(--grass); }

.club-list { display: grid; gap: 6px; }
.club-row { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(var(--fg), .02); }
.club-row.mine { border-style: dashed; opacity: .75; }
.club-row .crest { width: 38px; height: 44px; }
.club-main { min-width: 0; }
.club-main b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.club-meta { display: flex; gap: 10px; font-size: 12.5px; flex-wrap: wrap; }
.club-meta .str { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--text); }
.chance { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.chance.hi { background: rgba(52,199,123,.16); color: var(--ok-ink); }
.chance.ok { background: rgba(90,176,255,.16); color: var(--sky-ink); }
.chance.lo { background: rgba(var(--acc), .16); color: var(--gold-text); }
.chance.off { background: rgba(255,93,98,.14); color: var(--bad-ink); }
.club-act { justify-self: end; }

.deal { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-2); }
.deal .crest { width: 44px; height: 52px; }
.deal.open { border-color: rgba(var(--acc), .45); background: linear-gradient(135deg, rgba(var(--acc), .08), transparent 60%), var(--bg-2); }
.deal.done { border-color: rgba(52,199,123,.5); background: linear-gradient(135deg, rgba(52,199,123,.1), transparent 60%), var(--bg-2); }
.deal-main { min-width: 0; }
.deal-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.deal-top b { font-size: 16px; }
.deal .terms { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin-top: 4px; }
.deal .terms span:first-child { color: var(--text); font-weight: 800; }
.deal-act { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.deal-act:empty { display: none; }
.offer .deal-act { grid-column: auto; }
.deal-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(var(--fg), .07); color: var(--muted); white-space: nowrap; }
.deal-st.open { background: rgba(var(--acc), .15); color: var(--gold-text); }
.deal-st.done { background: rgba(52,199,123,.15); color: var(--ok-ink); }
.deal-st.wait { background: rgba(90,176,255,.14); color: var(--sky-ink); }
.deal-st.off { background: rgba(255,93,98,.12); color: var(--bad-ink); }

.patience { display: inline-flex; gap: 4px; }
.patience i { width: 10px; height: 10px; border-radius: 50%; background: var(--grass); display: block; }
.patience i.off { background: rgba(var(--fg), .15); }
.nego-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-bottom: 14px; }
.nego-head .crest { width: 48px; height: 56px; }
.nego-head h3 { font-size: 20px; line-height: 1.15; }
.nego-pat { display: grid; justify-items: end; gap: 4px; }
.nego-pat small { font-size: 11px; color: var(--dim); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.nego-now { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.nego-now > div { padding: 10px 12px; border-radius: 12px; background: rgba(var(--fg), .05); }
.nego-now span { display: block; font-size: 12px; color: var(--muted); }
.nego-now b { font-size: 17px; font-family: var(--display); font-weight: 800; letter-spacing: .01em; }
.nego-now small { font-size: 12px; color: var(--muted); font-family: var(--body); font-weight: 600; }
.nego-msg { display: flex; gap: 10px; align-items: flex-start; padding: 12px; margin-bottom: 14px; border-radius: 12px; background: rgba(var(--acc), .1); border: 1px solid rgba(var(--acc), .35); font-size: 14.5px; }
.nego-msg .ph-fill, .nego-msg .ph { color: var(--gold-text); font-size: 18px; margin-top: 2px; }
.field label b { float: right; color: var(--gold-text); font-weight: 800; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: rgba(var(--fg), .1); outline: none; margin: 10px 0 4px; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); border: 3px solid var(--bg-2); box-shadow: 0 2px 8px rgba(0,0,0,.35); cursor: pointer; }
.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); border: 3px solid var(--bg-2); cursor: pointer; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(var(--acc), .35); }

.tip-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tip-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 14px; color: var(--muted); }
.tip-list .ph-fill, .tip-list .ph { color: var(--gold-text); font-size: 18px; margin-top: 2px; }
.tip-list b { color: var(--text); }
.empty-mini { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 18px 10px; color: var(--muted); font-size: 14px; }
.empty-mini .ph-duotone { font-size: 34px; color: var(--dim); }

.biz { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.biz-tile { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; color: var(--text); text-decoration: none; padding: 14px; }
.biz-tile:hover { text-decoration: none; border-color: var(--gold-text); }
.biz-tile > .ph-duotone { font-size: 28px; color: var(--gold-text); }
.biz-tile b { display: block; }
.biz-tile span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
@media (max-width: 420px) { .biz { grid-template-columns: 1fr; } }

.sp-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.sp-sum > div { padding: 14px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); display: grid; gap: 2px; }
.sp-sum .ph-duotone { font-size: 26px; color: var(--gold-text); }
.sp-sum b { font-family: var(--display); font-size: 24px; font-weight: 800; line-height: 1.1; }
.sp-sum span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 520px) { .sp-sum { grid-template-columns: 1fr 1fr; } .sp-sum > div:last-child { grid-column: 1 / -1; } }
.sp-card { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-2); }
.sp-card.offer { border-color: rgba(var(--acc), .45); background: linear-gradient(135deg, rgba(var(--acc), .08), transparent 55%), var(--bg-2); }
.sp-mark { --c: #2D7BDF; display: grid; place-items: center; min-height: 96px; padding: 8px; border-radius: 14px; text-align: center; font-family: var(--display); font-weight: 900; font-size: 19px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: #fff; word-break: break-word;
  background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.22), transparent 60%), var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.sp-mark.sm { min-height: 56px; width: 72px; font-size: 13px; }
.sp-mark.cat-boots { --c: #1F2433; } .sp-mark.cat-bet { --c: #E35B12; } .sp-mark.cat-car { --c: #3D4B66; } .sp-mark.cat-drink { --c: #0F7A4F; }
.sp-mark.cat-watch { --c: #6E5A2E; } .sp-mark.cat-bank { --c: #6C2BD9; } .sp-mark.cat-tech { --c: #1361C9; } .sp-mark.cat-food { --c: #C9362C; }
.sp-mark.cat-care { --c: #0D8CA8; } .sp-mark.cat-game { --c: #8A1FB8; }
.sp-body { min-width: 0; display: grid; gap: 6px; align-content: start; }
.sp-top { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tier { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; }
.tier.regional { background: rgba(var(--fg), .07); color: var(--muted); }
.tier.nacional { background: rgba(90,176,255,.16); color: var(--sky-ink); }
.tier.global { background: rgba(var(--acc), .18); color: var(--gold-text); }
.sp-money { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.sp-money b { font-family: var(--display); font-size: 26px; font-weight: 900; line-height: 1; }
.sp-money span { color: var(--muted); font-size: 13px; }
.sp-money em { font-style: normal; font-size: 12.5px; color: var(--ok-ink); font-weight: 700; margin-left: 6px; }
.sp-clauses { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-clauses:empty { display: none; }
.cl { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.cl.bad { color: var(--bad-ink); } .cl.good { color: var(--ok-ink); }
.sp-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
@media (max-width: 420px) { .sp-card { grid-template-columns: 1fr; } .sp-mark { min-height: 64px; } }
.sp-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.sp-slot { display: grid; gap: 2px; padding: 12px; border-radius: 14px; border: 1px dashed var(--line-2); color: var(--muted); }
.sp-slot .ph-duotone { font-size: 24px; color: var(--dim); }
.sp-slot b { color: var(--muted); font-size: 14px; }
.sp-slot span { font-size: 12px; }
.sp-slot small { font-size: 11.5px; color: var(--dim); line-height: 1.3; margin-top: 2px; }
.sp-slot.on { border-style: solid; border-color: rgba(var(--acc), .45); background: rgba(var(--acc), .07); }
.sp-slot.on .ph-duotone { color: var(--gold-text); }
.sp-slot.on b { color: var(--text); }
.grid > *, .stack > * { min-width: 0; }
@media (max-width: 440px) { .topbar [data-theme-btn] { display: none; } }
.club-row { grid-template-columns: 38px 1fr auto; }
.club-meta { align-items: center; row-gap: 4px; }
.club-meta .chance { padding: 2px 8px; font-size: 11.5px; }
.menu-pop .theme-pick .seg button { width: auto; padding: 0 6px; justify-content: center; }
.menu-pop .theme-pick .tp-btn { display: grid; width: auto; padding: 10px 4px; gap: 6px; justify-items: center; }
.menu-pop .theme-pick .ph { color: inherit; font-size: 16px; }
.menu-pop .theme-pick .tp-btn span { font-size: 12px; line-height: 1.2; text-align: center; }
@media (min-width: 1024px) { .market-grid { grid-template-columns: 1fr 1.2fr; } }

/* ===================== v5: lance, partida ao vivo, resultado ===================== */
/* lance */
.pitch-overlay { background: radial-gradient(120% 80% at 50% 0%, #10224A 0%, #050A18 70%); opacity: 0; transform: scale(1.04); transition: opacity .2s, transform .25s cubic-bezier(.2,.9,.3,1); animation: none; }
.pitch-overlay.in { opacity: 1; transform: none; }
.pitch-overlay.out { opacity: 0; transform: scale(.98); }
.pitch-hud { color: #fff; }
.ph-title { font-weight: 800; font-size: 16px; }
.ph-title small { display: block; color: rgba(255,255,255,.65); font-weight: 600; font-size: 13px; }
.ph-score { display: inline-flex; align-items: center; gap: 0; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); }
.ph-tm { padding: 7px 10px; font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: .02em; position: relative; }
.ph-tm::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tc); }
.ph-tm:last-of-type::before { left: auto; right: 0; }
.ph-score > b { padding: 6px 12px; font-family: var(--display); font-weight: 900; font-size: 22px; background: rgba(255,255,255,.95); color: #0B1430; font-variant-numeric: tabular-nums; }
.ph-score > b i { font-style: normal; opacity: .4; margin: 0 2px; }
.ph-score em { font-style: normal; padding: 7px 10px; font-family: var(--display); font-weight: 800; font-size: 16px; color: #FFC845; }
.ph-right { display: flex; gap: 8px; align-items: center; }
.ph-wind { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.ph-wind .wa { display: inline-grid; place-items: center; color: #8FD3FF; font-size: 16px; transition: transform .3s; }
.ph-wind b { font-family: var(--display); font-size: 17px; }
.ph-wind small { font-size: 11px; color: rgba(255,255,255,.6); }
.ph-btn { height: 38px; min-width: 38px; padding: 0 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 14px; cursor: pointer; }
.ph-btn:hover { background: rgba(255,255,255,.14); }
.ph-chip { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(5,10,24,.72); color: #fff; font-size: 13px; font-weight: 700; backdrop-filter: blur(4px); pointer-events: none; }
.ph-chip b { font-family: var(--display); font-size: 16px; color: #FFC845; }
.ph-chip b:empty { display: none; }
.ph-drill { position: absolute; right: 10px; top: 10px; padding: 6px 12px; border-radius: 999px; background: rgba(5,10,24,.72); color: #fff; font-size: 13px; font-weight: 700; pointer-events: none; }
.pitch-help { color: rgba(255,255,255,.6); font-size: 13px; }
@media (max-width: 420px) { .ph-btn.wide span { display: none; } .ph-tm { padding: 6px 7px; font-size: 15px; } .ph-score > b { font-size: 19px; padding: 6px 9px; } }

/* partida ao vivo */
.mx { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.mx-comp { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.live-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; background: #E5242C; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.live-chip i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.mx-board { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 18px 16px 22px; border-radius: 22px; overflow: hidden; color: #fff;
  background: linear-gradient(100deg, color-mix(in srgb, var(--home) 70%, #050A18) 0%, #0A1330 38%, #0A1330 62%, color-mix(in srgb, var(--away) 70%, #050A18) 100%); box-shadow: var(--shadow); }
.mx-board::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%); pointer-events: none; }
.mx-team { display: flex; align-items: center; gap: 10px; min-width: 0; z-index: 1; }
.mx-team.away { justify-content: flex-end; text-align: right; }
.mx-team .crest { width: 42px; height: 50px; flex: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.mx-team b { display: block; font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1; letter-spacing: .02em; }
.mx-team small { display: block; color: rgba(255,255,255,.7); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.mx-team.mine b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #FFC845; margin-left: 6px; vertical-align: middle; }
.mx-mid { text-align: center; z-index: 1; }
.mx-score { display: inline-flex; align-items: center; gap: 4px; padding: 4px 14px; border-radius: 14px; background: rgba(255,255,255,.96); color: #0A1330; font-family: var(--display); font-weight: 900; font-size: 44px; line-height: 1.05; font-variant-numeric: tabular-nums; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.mx-score i { font-style: normal; opacity: .35; }
.mx-score span { display: inline-block; min-width: 26px; }
.mx-score span.bump { animation: bump .6s cubic-bezier(.2,1.6,.4,1); color: #E5242C; }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.7); } 100% { transform: scale(1); } }
.mx-clock { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 12px; border-radius: 999px; background: rgba(0,0,0,.35); font-family: var(--display); font-weight: 800; font-size: 17px; }
.mx-clock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34C77B; animation: blink 1s infinite; }
.mx-clock.paused::before { background: #FFC845; animation: none; }
.mx-mom { position: absolute; left: 16px; right: 16px; bottom: 8px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--home), rgba(255,255,255,.25) 50%, var(--away)); opacity: .85; }
.mx-mom i { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 0 12px #fff; transition: left .9s cubic-bezier(.2,.9,.3,1); }
.mx-board.flash-mine { animation: flashMine 1.2s ease-out; }
.mx-board.flash-opp { animation: flashOpp 1.2s ease-out; }
@keyframes flashMine { 0% { box-shadow: 0 0 0 0 rgba(255,200,69,.9), var(--shadow); } 100% { box-shadow: 0 0 0 26px rgba(255,200,69,0), var(--shadow); } }
@keyframes flashOpp { 0% { box-shadow: 0 0 0 0 rgba(229,36,44,.8), var(--shadow); } 100% { box-shadow: 0 0 0 26px rgba(229,36,44,0), var(--shadow); } }
@media (max-width: 520px) { .mx-team small { display: none; } .mx-team b { font-size: 22px; } .mx-score { font-size: 36px; padding: 2px 10px; } .mx-team .crest { width: 34px; height: 40px; } }
.mx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ms { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 4px; padding: 10px 12px 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); position: relative; }
.ms b { font-family: var(--display); font-size: 19px; font-weight: 800; }
.ms span { text-align: center; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.ms-bar { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--away) 75%, transparent); overflow: hidden; }
.ms-bar i { display: block; height: 100%; background: var(--home); transition: width .6s; }
@media (max-width: 520px) { .mx-stats { grid-template-columns: repeat(2, 1fr); } }
.mx-effort { padding: 14px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); display: grid; gap: 12px; }
.mx-ef-top { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.mx-ef-top b { display: block; }
.mx-ef-top small { color: var(--muted); font-size: 12.5px; }
.heart { --hc: #FFC845; --bpm: .9s; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; color: var(--hc); background: color-mix(in srgb, var(--hc) 14%, transparent); }
.heart .ph-fill { animation: beat var(--bpm) infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.28); } 30% { transform: scale(.95); } 45% { transform: scale(1.15); } }
.mx-energy { display: grid; grid-template-columns: auto 90px auto; align-items: center; gap: 8px; }
.mx-energy small { font-size: 12px; color: var(--muted); }
.mx-energy b { font-family: var(--display); font-size: 20px; min-width: 28px; text-align: right; }
.mx-energy .bar i { background: var(--grass); transition: width .4s; }
.mx-energy .bar.low i { background: var(--red); }
.mx-seg button.active { background: var(--ef); color: #0B1430; }
@media (max-width: 520px) { .mx-ef-top { grid-template-columns: auto 1fr; } .mx-energy { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; } }
.mx-ctrl { display: flex; gap: 8px; }
.mx-ctrl .btn { flex: 1; }
.mx-ctrl .btn:last-child { flex: none; }
.mx-feed { display: grid; gap: 6px; max-height: 56vh; overflow-y: auto; padding: 2px; }
.nl { display: grid; grid-template-columns: 38px 28px 1fr; gap: 6px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); border-left: 4px solid rgba(var(--fg), .15); font-size: 14.5px; animation: nlIn .35s cubic-bezier(.2,.9,.3,1); }
@keyframes nlIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.nl-min { font-family: var(--display); font-weight: 800; color: var(--dim); font-size: 16px; }
.nl-ic { color: var(--muted); font-size: 16px; display: grid; place-items: center; }
.nl.mine { border-left-color: var(--mine); }
.nl.opp { border-left-color: rgba(var(--fg), .35); }
.nl.k-save .nl-ic, .nl.k-post .nl-ic { color: var(--sky); }
.nl.k-card .nl-ic { color: #F2C200; }
.nl.k-moment { background: rgba(var(--acc), .1); border-color: rgba(var(--acc), .4); border-left-color: var(--gold); font-weight: 700; }
.nl.k-moment .nl-ic { color: var(--gold-text); }
.nl.k-half, .nl.k-end { background: transparent; border-style: dashed; border-left-width: 1px; color: var(--muted); font-weight: 700; }
.nl.big { padding: 14px 12px; font-weight: 900; font-size: 17px; font-family: var(--body); color: #fff; border: 0; background: linear-gradient(100deg, color-mix(in srgb, var(--mine) 85%, #000) 0%, color-mix(in srgb, var(--mine) 55%, #0A1330) 100%); animation: nlIn .35s, goalPulse 1.4s ease-out; }
.nl.big.opp { background: linear-gradient(100deg, #3A1016, #1B0A12); }
.nl.big .nl-min, .nl.big .nl-ic { color: rgba(255,255,255,.85); }
@keyframes goalPulse { 0% { box-shadow: 0 0 0 0 rgba(255,200,69,.7); } 100% { box-shadow: 0 0 0 18px rgba(255,200,69,0); } }
/* abertura */
.mx-intro { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 16px; background: rgba(3,7,18,.82); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; }
.mx-intro.in { opacity: 1; }
.mi-card { width: min(460px, 100%); padding: 22px; border-radius: 24px; color: #fff; text-align: center; background: radial-gradient(120% 90% at 50% 0%, #1A2E63 0%, #0A1330 70%); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 80px rgba(0,0,0,.6); display: grid; gap: 14px; justify-items: center; transform: translateY(16px); transition: transform .4s cubic-bezier(.2,1.2,.3,1); }
.mx-intro.in .mi-card { transform: none; }
.mi-comp { font-size: 13px; color: rgba(255,255,255,.7); font-weight: 700; }
.mi-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; width: 100%; }
.mi-vs > span { font-family: var(--display); font-weight: 900; font-size: 22px; color: rgba(255,255,255,.4); }
.mi-t { display: grid; justify-items: center; gap: 8px; }
.mi-t .crest { width: 64px; height: 76px; filter: drop-shadow(0 8px 16px rgba(0,0,0,.4)); }
.mi-t b { font-size: 15px; line-height: 1.2; }
.mi-t.l { animation: slideL .6s cubic-bezier(.2,1.1,.3,1); }
.mi-t.r { animation: slideR .6s cubic-bezier(.2,1.1,.3,1); }
@keyframes slideL { from { transform: translateX(-60px); opacity: 0; } }
@keyframes slideR { from { transform: translateX(60px); opacity: 0; } }
.mi-meta { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
.mi-meta > div { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.mi-meta small { display: block; font-size: 11px; color: rgba(255,255,255,.6); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.mi-meta b { font-size: 14.5px; }
.mi-ball { display: flex; align-items: center; gap: 10px; }
.mi-ball svg { animation: spinBall 3s linear infinite; flex: none; }
@keyframes spinBall { to { transform: rotate(360deg); } }
/* intervalo */
.ht-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(var(--fg), .08); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.halftime .ht-score { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 10px; font-size: 18px; }
.halftime .ht-score span { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--muted); }
.halftime .ht-score b { font-family: var(--display); font-weight: 900; font-size: 56px; }
.ht-energy { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(var(--fg), .05); }
.ht-energy .ph-duotone { color: var(--grass); font-size: 20px; }
/* resultado */
.rx { max-width: 880px; margin: 0 auto; display: grid; gap: 14px; }
.rx-hero { position: relative; text-align: center; color: #fff; padding: 20px 16px 22px; border-radius: 24px; overflow: hidden; background: linear-gradient(100deg, color-mix(in srgb, var(--home) 65%, #050A18) 0%, #0A1330 40%, #0A1330 60%, color-mix(in srgb, var(--away) 65%, #050A18) 100%); box-shadow: var(--shadow); }
.rx-comp { font-size: 13px; color: rgba(255,255,255,.7); font-weight: 700; }
.rx-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 14px 0 6px; }
.rx-t { display: grid; justify-items: center; gap: 8px; }
.rx-t .crest { width: 56px; height: 66px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.4)); }
.rx-t b { font-size: 14.5px; line-height: 1.2; }
.rx-t.mine b { color: #FFC845; }
.rx-final { font-family: var(--display); font-weight: 900; font-size: 68px; line-height: 1; display: flex; gap: 6px; animation: finalIn .6s cubic-bezier(.2,1.4,.4,1); }
.rx-final i { font-style: normal; opacity: .4; }
@keyframes finalIn { from { transform: scale(.4); opacity: 0; } }
.rx-verdict { display: inline-block; margin-top: 6px; padding: 5px 16px; border-radius: 999px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; background: rgba(255,255,255,.14); animation: stamp .5s .35s both cubic-bezier(.2,1.6,.4,1); }
.rx.win .rx-verdict { background: #34C77B; color: #06200F; }
.rx.loss .rx-verdict { background: #E5484D; color: #fff; }
@keyframes stamp { from { transform: scale(2.2) rotate(-8deg); opacity: 0; } }
.rx-grid { display: grid; grid-template-columns: 300px 1fr; gap: 14px; }
@media (max-width: 760px) { .rx-grid { grid-template-columns: 1fr; } }
.rx-me { text-align: center; display: grid; gap: 12px; justify-items: center; align-content: start; }
.rating-ring.big { width: 148px; height: 148px; margin: 4px auto 0; }
.rating-ring.big > div { width: 122px; height: 122px; }
.rating-ring.big > div > div { display: grid; justify-items: center; }
.rating-ring.big b { font-size: 54px; }
.rating-ring.big small { font-size: 12px; color: var(--muted); font-weight: 700; margin-top: -4px; text-transform: uppercase; letter-spacing: .06em; }
.rating-ring.done { animation: ringDone .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes ringDone { 50% { transform: scale(1.08); } }
.rx-ga { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.rx-ga > div { padding: 10px 6px; border-radius: 12px; background: rgba(var(--fg), .05); }
.rx-ga b { display: block; font-family: var(--display); font-size: 24px; font-weight: 900; line-height: 1.1; }
.rx-ga span { font-size: 12px; color: var(--muted); font-weight: 700; }
.motm-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-weight: 900; color: #2B1F00; background: linear-gradient(110deg, #FFC845 0%, #FFE9A3 45%, #FFC845 60%); background-size: 220% 100%; animation: shine 2.2s linear infinite, stamp .5s .9s both cubic-bezier(.2,1.6,.4,1); }
@keyframes shine { to { background-position: -220% 0; } }
.lvl-up { display: none; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; background: linear-gradient(110deg, rgba(var(--acc), .2), rgba(var(--acc), .06)); border: 1px solid rgba(var(--acc), .5); text-align: left; }
.lvl-up.show { display: flex; animation: stamp .5s cubic-bezier(.2,1.6,.4,1); }
.lvl-up .ph-fill { font-size: 28px; color: var(--gold-text); }
.lvl-up small { display: block; font-size: 12px; color: var(--muted); font-weight: 700; }
.lvl-up b { font-family: var(--display); font-size: 26px; font-weight: 900; }
.lvl-up b i { font-style: normal; color: var(--gold-text); }
.rx-gains { display: grid; gap: 10px; align-content: start; }
.rx-gains h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-top: 4px; }
.rx-gains h3 .ph-duotone { color: var(--gold-text); font-size: 20px; }
.rx-money { display: grid; gap: 6px; }
.rm { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: rgba(var(--fg), .04); animation: nlIn .4s var(--d) both; }
.rm b { font-family: var(--display); font-size: 19px; color: var(--gold-text); }
.rx-rel, .rx-xp { display: grid; gap: 10px; }
.rr, .rxp { display: grid; grid-template-columns: 110px 1fr 64px; gap: 10px; align-items: center; font-size: 14px; }
.rr .bar i, .rxp .bar i { transition: width .9s cubic-bezier(.2,.9,.3,1); }
.rr b { font-family: var(--display); font-size: 18px; text-align: right; color: var(--muted); }
.rr b.up { color: var(--ok-ink); } .rr b.down { color: var(--bad-ink); }
.rxp span b { font-family: var(--display); }
.rxp em { font-style: normal; font-size: 12.5px; color: var(--sky-ink); font-weight: 800; text-align: right; }
.rxp.lv span b { color: var(--gold-text); animation: bump .6s cubic-bezier(.2,1.6,.4,1); display: inline-block; }
.rx-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.confetti-cv { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 120; }
/* bola e comemoração */
.gear-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.gear { display: grid; justify-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(var(--fg), .03); color: var(--text); cursor: pointer; text-align: center; transition: transform .15s, border-color .15s; }
.gear:hover { transform: translateY(-2px); border-color: var(--line-2); }
.gear-art { height: 52px; display: grid; place-items: center; }
.gear-art .ph-duotone { font-size: 40px; color: var(--gold-text); }
.gear b { font-size: 14px; line-height: 1.2; }
.gear span { font-size: 12.5px; color: var(--muted); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.gear.on { border-color: var(--gold-text); background: rgba(var(--acc), .1); }
.gear.on span { color: var(--gold-text); }
.gear.locked span { color: var(--gold-text); }
.gear.locked .gear-art { opacity: .75; }
@media (prefers-reduced-motion: reduce) { .nl, .mx-score span.bump, .rx-final, .rx-verdict, .heart .ph-fill, .motm-badge, .mi-ball svg { animation: none !important; } }
.rm b { white-space: nowrap; }
.mx-mid { display: grid; justify-items: center; gap: 6px; }
.mx-clock { margin-top: 0; }
.nl.big { background: linear-gradient(100deg, color-mix(in srgb, var(--mine) 62%, #0A1330) 0%, color-mix(in srgb, var(--mine) 28%, #0A1330) 100%); }
@media (max-width: 520px) { .mx-board { padding: 14px 12px 22px; gap: 6px; } .mx-team { gap: 6px; } .mx-team b { font-size: 19px; } .mx-score { font-size: 32px; } .mx-clock { font-size: 15px; padding: 2px 10px; } }

/* ===================== v6: tutorial ===================== */
.ph-guide { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: rgba(5,10,24,.82); color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.35; backdrop-filter: blur(4px); pointer-events: none; animation: nlIn .4s; }
.ph-guide .ph-fill { color: #FFC845; font-size: 18px; flex: none; margin-top: 1px; }
.tut { text-align: center; display: grid; gap: 10px; justify-items: center; }
.tut > .ph-duotone { font-size: 44px; color: var(--gold-text); }
.tut h3 { font-size: 22px; }
.tut p { color: var(--muted); max-width: 400px; }
.tut .modal-actions { width: 100%; }
.tut-dots { display: flex; gap: 6px; }
.tut-dots i { width: 28px; height: 5px; border-radius: 4px; background: rgba(var(--fg), .14); }
.tut-dots i.on { background: var(--gold); }
.tut-dots i.done { background: var(--grass); }
.tut-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(var(--acc), .14); color: var(--gold-text); font-size: 13px; font-weight: 800; }
.tut-tag .ph-duotone { font-size: 16px; }
.tut-art { width: 100%; max-width: 280px; height: auto; border-radius: 16px; background: linear-gradient(180deg, #1E7A45, #228A4C); }
.tut-art .g { fill: none; stroke: #fff; stroke-width: 2; }
.tut-art .b { fill: #fff; }
.tut-art .m { fill: #5AB0FF; stroke: #fff; stroke-width: 2; }
.tut-art .t { fill: none; stroke: #FFC845; stroke-width: 2; stroke-dasharray: 3 3; }
.tut-art .w circle { fill: #E9EDF5; stroke: #56607A; stroke-width: 1.5; }
.tut-art .a { fill: none; stroke: #FFC845; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 160; animation: tutDraw 1.8s ease-in-out infinite; }
.tut-art .a.s { stroke: rgba(255,255,255,.75); stroke-width: 2.5; }
.tut-art text { fill: #fff; font: 700 10px Figtree, sans-serif; }
@keyframes tutDraw { 0% { stroke-dashoffset: 160; } 60%, 100% { stroke-dashoffset: 0; } }
.ph-guide { top: auto; bottom: 10px; }
.pitch-wrap:has(.ph-guide) .ph-chip { display: none; }
/* disputa de pênaltis */
.so { text-align: center; display: grid; gap: 14px; }
.so-row { display: grid; grid-template-columns: 64px 1fr 40px; align-items: center; gap: 10px; }
.so-row span { font-family: var(--display); font-weight: 900; font-size: 22px; text-align: left; }
.so-row b { font-family: var(--display); font-size: 30px; font-weight: 900; }
.so-dots { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.so-dots i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(var(--fg), .2); }
.so-dots i.ok { background: var(--grass); border-color: var(--grass); animation: stamp .35s cubic-bezier(.2,1.6,.4,1); }
.so-dots i.no { background: var(--red); border-color: var(--red); animation: stamp .35s cubic-bezier(.2,1.6,.4,1); }

/* ===================== v7: gemas, missões, passe, desafio, loja, linha do tempo ===================== */
.gem-ic { color: #5AD8FF; }
.gems { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--text); }
.gems .ph-fill { color: #5AD8FF; }
.gem-pill { text-decoration: none; color: var(--text); }
.gem-pill .ph-fill { color: #5AD8FF; }
@media (max-width: 520px) { .topbar .gem-pill { display: none; } }
.lvl-card { display: grid; gap: 12px; }
.lvl-top { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.lvl-badge { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; align-content: center; background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: var(--gold-ink); }
.lvl-badge b { font-family: var(--display); font-size: 28px; line-height: 1; font-weight: 900; }
.lvl-badge span { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.lvl-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.lvl-row span { font-family: var(--display); font-weight: 800; color: var(--gold-text); font-size: 16px; }
.lvl-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lvl-next li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 13.5px; color: var(--muted); }
.lvl-next .ph-fill { color: var(--gold-text); margin-top: 2px; }
.live-tiles { margin-bottom: 0; }
.boot-bonus { font-style: normal; font-size: 12px; color: var(--ok-ink); margin-left: 4px; font-family: var(--body); font-weight: 800; }
.gear-stats { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--ok-ink); }
/* missões */
.mis { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(var(--fg), .02); }
.mis-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--acc), .12); color: var(--gold-text); font-size: 20px; }
.mis.done { border-color: rgba(52,199,123,.5); background: rgba(52,199,123,.06); }
.mis.done .mis-ic { background: rgba(52,199,123,.16); color: var(--grass); animation: ringDone 1.4s infinite; }
.mis.claimed { opacity: .55; }
.mis.claimed .mis-ic { background: rgba(var(--fg), .06); color: var(--muted); animation: none; }
.mis-main b { display: block; font-size: 14.5px; margin-bottom: 6px; }
.mis-rw { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); font-weight: 700; margin-top: 6px; }
.mis-rw .ph-fill { font-size: 12px; }
/* passe */
.pass-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; margin-bottom: 14px; }
@media (max-width: 620px) { .pass-head { grid-template-columns: auto 1fr; } .pass-head > :last-child { grid-column: 1 / -1; justify-self: start; } }
.pass-lv { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: radial-gradient(circle at 30% 30%, var(--gold-2), var(--gold)); color: var(--gold-ink); box-shadow: 0 8px 24px rgba(var(--acc), .35); }
.pass-lv b { font-family: var(--display); font-size: 34px; line-height: 1; font-weight: 900; }
.pass-lv span { font-size: 11px; font-weight: 800; }
.pass-info b { display: block; margin-bottom: 6px; }
.pass-info .bar { margin-bottom: 6px; }
.pass-gold { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(var(--acc), .15); color: var(--gold-text); font-weight: 800; font-size: 13px; }
.pass-track { position: relative; display: grid; grid-template-columns: 74px 1fr; gap: 8px; }
.pass-labels { display: grid; grid-template-rows: 1fr 30px 1fr; font-size: 12px; font-weight: 800; color: var(--muted); }
.pass-labels span { display: flex; align-items: center; gap: 4px; }
.pass-labels span:last-child { grid-row: 3; }
.gold-t { color: var(--gold-text) !important; }
.pass-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.pcol { flex: none; width: 104px; display: grid; grid-template-rows: 1fr 30px 1fr; gap: 0; scroll-snap-align: center; }
.plv { display: grid; place-items: center; font-family: var(--display); font-weight: 900; color: var(--dim); position: relative; }
.plv::before { content: ""; position: absolute; left: -8px; right: 0; top: 50%; height: 4px; margin-top: -2px; background: rgba(var(--fg), .1); z-index: -1; }
.pcol.reached .plv { color: var(--gold-text); }
.pcol.reached .plv::before { background: var(--gold); }
.pn { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 96px; padding: 8px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); font-size: 20px; cursor: default; text-align: center; }
.pn small { font-size: 11px; line-height: 1.2; font-weight: 700; }
.pn.premium { background: linear-gradient(160deg, rgba(var(--acc), .1), var(--bg-2)); border-color: rgba(var(--acc), .25); }
.pn.reached { color: var(--text); }
.pn.can { border-color: var(--gold-text); color: var(--gold-text); cursor: pointer; box-shadow: 0 0 0 3px rgba(var(--acc), .15); animation: ringDone 1.6s infinite; }
.pn.claimed { opacity: .5; }
/* desafio */
.chal-hero { padding: 20px; border-radius: 22px; color: #fff; display: grid; gap: 14px; background: radial-gradient(120% 90% at 0% 0%, #1E7A45 0%, #0A1330 70%); box-shadow: var(--shadow); }
.chal-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255,255,255,.75); font-weight: 700; }
.chal-score small { display: block; font-size: 12px; color: rgba(255,255,255,.65); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.chal-score b { font-family: var(--display); font-size: 64px; font-weight: 900; line-height: 1; color: #FFC845; }
.chal-score span { display: block; font-weight: 700; color: rgba(255,255,255,.8); }
.chal-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.8); }
.chal-meta span { display: inline-flex; gap: 5px; align-items: center; }
.chal-rule { font-size: 12.5px; color: rgba(255,255,255,.6); text-align: center; }
.rank-row.chal-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border-top: 0; background: rgba(var(--fg), .03); }
.rank-row .pos { font-family: var(--display); font-weight: 900; font-size: 18px; color: var(--dim); }
.rank-row small { display: block; font-size: 12px; }
.rank-row b.gold-t { font-family: var(--display); font-size: 20px; }
.rank-row > div { min-width: 0; }
.rw-row { display: flex; gap: 16px; justify-content: center; font-size: 20px; font-family: var(--display); }
/* loja */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.shop-it { display: grid; justify-items: start; gap: 4px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(var(--fg), .03); color: var(--text); text-align: left; cursor: pointer; transition: transform .15s, border-color .15s; }
.shop-it:hover { transform: translateY(-2px); border-color: var(--gold-text); }
.si-ic { font-size: 28px; color: var(--gold-text); }
.shop-it small { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.si-price { margin-top: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(90,216,255,.12); font-size: 13px; }
.agent { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; border: 1px solid var(--line); }
.agent.on { border-color: var(--gold-text); background: rgba(var(--acc), .07); }
.ag-ic { font-size: 30px; color: var(--gold-text); }
.ag-buy { display: grid; gap: 6px; }
@media (max-width: 480px) { .agent { grid-template-columns: 40px 1fr; } .ag-buy { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; } }
.packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 480px) { .packs { grid-template-columns: repeat(2, 1fr); } }
.pack { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: 14px; border: 1px dashed var(--line-2); opacity: .7; }
.pack .gem-ic { font-size: 24px; }
.pack b { font-family: var(--display); font-size: 20px; }
.pack span { font-size: 12px; color: var(--muted); }
.ad-modal { display: grid; gap: 12px; }
.ad-slot { min-height: 250px; border-radius: 14px; background: rgba(var(--fg), .05); display: grid; place-items: center; overflow: hidden; }
.ad-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 700; }
/* linha do tempo */
.tl { position: relative; display: grid; gap: 14px; padding-left: 6px; }
.tl::before { content: ""; position: absolute; left: 22px; top: 6px; bottom: 6px; width: 2px; background: var(--line-2); }
.tl-it { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; position: relative; }
.tl-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); border: 2px solid var(--line-2); color: var(--muted); font-size: 16px; z-index: 1; }
.tl-it.k-title .tl-dot, .tl-it.k-award .tl-dot { border-color: var(--gold-text); color: var(--gold-text); background: rgba(var(--acc), .12); }
.tl-it.k-transfer .tl-dot { border-color: var(--sky); color: var(--sky); }
.tl-it.k-scandal .tl-dot { border-color: var(--red); color: var(--red); }
.tl-it.k-milestone .tl-dot { border-color: var(--grass); color: var(--grass); }
.tl-body { padding: 6px 0; }
.tl-body small { display: block; font-size: 11.5px; color: var(--dim); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.tl-body b { display: block; font-size: 15px; }
.tl-body span { display: block; color: var(--muted); font-size: 13.5px; }
/* master */
.mbars { display: flex; align-items: flex-end; gap: 6px; height: 160px; }
.mbar { flex: 1; display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; text-align: center; }
.mbar i { align-self: end; display: block; background: var(--gold); border-radius: 6px 6px 0 0; min-height: 2px; }
.mbar span { font-size: 11px; color: var(--dim); }
.cron-url { display: block; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(var(--fg), .05); font-size: 12.5px; word-break: break-all; }

/* v8: celular */
.phone-top .read-all { margin-left: auto; font-size: 13px; gap: 6px; padding: 0 12px; min-height: 34px; }
@media (max-width: 380px) { .phone-top .read-all { font-size: 12px; padding: 0 9px; } }

/* v8: partida trava a navegação */
body.match-on .bottomnav { display: none; }
body.match-on .sidenav a, body.match-on .topbar a, body.match-on .topbar [data-menu], body.match-on .topbar [data-energy] { pointer-events: none; opacity: .38; }
body.match-on .main { padding-bottom: 24px; }
.mi-resume { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 14px; color: rgba(255,255,255,.85); margin: 4px 0 12px; }
.mx > * { min-width: 0; }
.mx-ctrl { flex-wrap: nowrap; }
.mx-ctrl .btn { flex: 1 1 auto; min-width: 0; white-space: nowrap; justify-content: center; }
.mx-ctrl .btn[data-snd], .mx-ctrl .btn[data-speed] { flex: 0 0 auto; }
@media (max-width: 400px) { .mx-ctrl { gap: 6px; } .mx-ctrl .btn { padding: 0 9px; font-size: 13px; gap: 5px; } }

/* ---------- v8: início da carreira (onboarding) ---------- */
.ob { max-width: 980px; margin: 0 auto; padding: 14px 16px 130px; }
.ob-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ob-top .brand-mark { width: 36px; height: 36px; flex: 0 0 auto; }
.ob-steps { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
.ob-step { display: grid; justify-items: center; gap: 4px; flex: 0 0 auto; }
.ob-step span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--fg), .06); border: 1px solid var(--line-2); color: var(--dim); font-size: 16px; transition: all .2s; }
.ob-step small { font-size: 11px; font-weight: 700; color: var(--dim); }
.ob-step.on span { background: var(--gold); color: var(--gold-ink); border-color: transparent; box-shadow: 0 0 0 4px rgba(var(--acc), .2); }
.ob-step.on small { color: var(--text); }
.ob-step.done span { background: rgba(52, 199, 123, .18); color: var(--grass); border-color: rgba(52, 199, 123, .4); }
.ob-line { flex: 1 1 18px; max-width: 46px; height: 2px; background: var(--line-2); margin-bottom: 18px; border-radius: 2px; }
@media (max-width: 560px) { .ob-step small { display: none; } .ob-line { margin-bottom: 0; } .ob-step span { width: 28px; height: 28px; font-size: 14px; } }
.ob-hint { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--muted); margin: 4px 0 0; }
.ob-hint .ph { margin-top: 2px; color: var(--gold-text); }
.ob .create-foot .inner { gap: 10px; }
.ob .create-foot .btn[disabled] { opacity: .55; }

.ob-skills { display: grid; gap: 14px; max-width: 720px; margin: 0 auto; }
.ob-pool { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: sticky; top: 8px; z-index: 5; background: var(--glass2); backdrop-filter: blur(10px); }
.ob-pool-n { display: flex; align-items: baseline; gap: 8px; margin-right: auto; }
.ob-pool-n b { font-family: var(--display); font-weight: 900; font-size: 44px; line-height: 1; color: var(--gold-text); transition: color .2s; }
.ob-pool-n span { color: var(--muted); font-weight: 600; }
.ob-pool.zero .ob-pool-n b { color: var(--grass); }
.ob-st { grid-template-columns: minmax(0, 1fr) 90px auto; }
.ob-st-l { display: flex; gap: 10px; align-items: center; min-width: 0; }
.ob-st-l .ph { font-size: 22px; color: var(--gold-text); flex: 0 0 auto; }
.ob-st-bar { height: 8px; border-radius: 6px; background: rgba(var(--fg), .08); overflow: hidden; }
.ob-st-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); border-radius: 6px; transition: width .2s; }
@media (max-width: 520px) { .ob-st { grid-template-columns: minmax(0, 1fr) auto; } .ob-st-bar { grid-column: 1 / -1; order: 3; } .ob-st small { display: none; } }

.ob-hero { display: flex; gap: 18px; align-items: flex-start; padding: 22px; border-radius: 22px; margin-bottom: 18px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, rgba(var(--acc), .28), transparent 55%), linear-gradient(135deg, #1B2D5E, #08122C); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 16px 40px rgba(8,18,44,.25); }
.ob-hero p, .ob-hero .muted { color: rgba(255,255,255,.78); }
.ob-hero .ob-tag { color: #FFC845; }
.ob-hero .ob-report div { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.ob-hero .ob-report small { color: rgba(255,255,255,.7); }
.ob-hero h1 { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 6vw, 44px); line-height: 1; margin: 6px 0 8px; }
.ob-hero p { margin: 0 0 6px; }
.ob-scout { width: 64px; height: 64px; border-radius: 18px; flex: 0 0 auto; display: grid; place-items: center; background: var(--gold); color: var(--gold-ink); font-size: 34px; box-shadow: 0 10px 30px rgba(var(--acc), .35); }
.ob-tag { display: inline-flex; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-text); }
@media (max-width: 520px) { .ob-hero { flex-direction: column; padding: 18px; } .ob-scout { width: 52px; height: 52px; font-size: 28px; } }
.ob-kicks { display: grid; gap: 10px; }
@media (min-width: 760px) { .ob-kicks { grid-template-columns: repeat(5, 1fr); } }
.ob-kick { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); transition: all .2s; }
@media (min-width: 760px) { .ob-kick { flex-direction: column; text-align: center; } }
.ob-kick b { display: block; font-size: 15px; }
.ob-kick small { color: var(--muted); font-size: 13px; line-height: 1.3; display: block; }
.ob-k-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: rgba(var(--fg), .06); font-size: 22px; color: var(--muted); }
.ob-kick.next { border-color: var(--gold-text); box-shadow: 0 0 0 3px rgba(var(--acc), .15); }
.ob-kick.next .ob-k-ic { color: var(--gold-text); }
.ob-kick.good .ob-k-ic { background: rgba(52, 199, 123, .18); color: var(--grass); }
.ob-kick.mid .ob-k-ic { background: rgba(90, 176, 255, .16); color: var(--sky); }
.ob-kick.bad .ob-k-ic { background: rgba(255, 93, 98, .14); color: var(--red); }
.ob-kick.good small { color: var(--ok-ink); font-weight: 700; } .ob-kick.bad small { color: var(--bad-ink); font-weight: 700; } .ob-kick.mid small { color: var(--sky-ink); font-weight: 700; }

.ob-vz .mx-board { background: linear-gradient(120deg, #6B4423, #2B1A0C 60%, #1A1208); }
.ob-vz .mx-comp .ph { color: #C99A62; }
.ob-vz-intro p { margin: 0 0 14px; color: var(--muted); }
.ob-vz-end { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; text-align: center; }
.ob-vz-end small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ob-vz-end b { font-family: var(--display); font-weight: 900; font-size: 32px; }

.ob-report { display: flex; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.ob-report div { background: rgba(var(--fg), .06); border: 1px solid var(--line); border-radius: 14px; padding: 8px 14px; min-width: 92px; }
.ob-report small { display: block; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ob-report b { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1.1; }
.ob-h2 { font-size: 20px; margin: 4px 0 12px; }
.ob-offers { display: grid; gap: 14px; }
@media (min-width: 700px) { .ob-offers { grid-template-columns: repeat(2, 1fr); } }
.ob-offer { position: relative; overflow: hidden; border-radius: 20px; padding: 18px; background: var(--bg-2); border: 1px solid var(--line-2); display: grid; gap: 14px; animation: obIn .4s ease-out both; }
.ob-offer:nth-child(2) { animation-delay: .08s; } .ob-offer:nth-child(3) { animation-delay: .16s; } .ob-offer:nth-child(4) { animation-delay: .24s; }
.ob-offer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--oc); }
@keyframes obIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ob-o-top { display: flex; gap: 12px; align-items: center; }
.ob-o-top .crest { width: 52px; height: 60px; flex: 0 0 auto; }
.ob-o-top b { font-size: 19px; display: block; }
.ob-o-top small { color: var(--muted); }
.ob-o-kv { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0; font-size: 15px; }
.ob-o-kv dt { color: var(--muted); }
.ob-o-kv dd { margin: 0; font-weight: 800; text-align: right; }
.ob-o-kv dd small { font-weight: 600; color: var(--muted); }
.ob-o-kv .role.good { color: var(--ok-ink); } .ob-o-kv .role.bad { color: var(--bad-ink); }
@media (max-width: 560px) {
  .ob .create-foot .inner { flex-wrap: wrap; }
  .ob .create-foot .inner .btn { flex: 1 1 auto; padding: 0 14px; }
  .ob .create-foot .inner .btn-ghost { flex: 0 0 auto; }
}

/* ---------- v8: calendário ---------- */
.day-card { display: grid; gap: 14px; position: relative; overflow: hidden; }
.day-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grass); }
.day-card.match::before { background: var(--gold); }
.day-card.eve::before { background: var(--sky); }
.day-top { display: flex; gap: 14px; align-items: center; }
.day-date { width: 58px; height: 62px; border-radius: 14px; flex: 0 0 auto; display: grid; place-content: center; text-align: center; background: var(--deep); color: #fff; border: 1px solid var(--line-2); }
.day-date b { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; }
.day-date span { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #FFC845; }
.day-txt { flex: 1; min-width: 0; }
.day-txt small { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.day-txt h3 { margin: 2px 0 6px; font-size: 18px; }
.day-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(52, 199, 123, .14); color: var(--ok-ink); }
.day-chip.match { background: rgba(var(--acc), .18); color: var(--gold-text); }
.day-chip.eve { background: rgba(90, 176, 255, .16); color: var(--sky-ink); }
.day-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ds-day { display: grid; justify-items: center; gap: 2px; padding: 8px 0 6px; border-radius: 12px; background: rgba(var(--fg), .04); border: 1px solid transparent; }
.ds-day small { font-size: 11px; font-weight: 800; color: var(--dim); }
.ds-day b { font-size: 16px; }
.ds-day i { height: 16px; font-size: 14px; color: var(--gold-text); display: grid; place-items: center; font-style: normal; }
.ds-day.past { opacity: .45; }
.ds-day.today { border-color: var(--gold-text); background: rgba(var(--acc), .1); }
.ds-day.game.cup i { color: var(--sky); }
.day-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.day-act { display: grid; justify-items: center; gap: 4px; padding: 14px 6px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(var(--fg), .03); color: var(--text); text-decoration: none; cursor: pointer; font: inherit; text-align: center; transition: transform .12s, border-color .12s; }
.day-act:hover { border-color: var(--gold-text); text-decoration: none; transform: translateY(-1px); }
.day-act .ph { font-size: 26px; color: var(--gold-text); }
.day-act b { font-size: 15px; }
.day-act small { font-size: 12px; color: var(--muted); line-height: 1.2; }
.day-act[disabled] { opacity: .5; pointer-events: none; }
.day-next { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--muted); padding-top: 4px; border-top: 1px solid var(--line); }
.day-next .ph { color: var(--gold-text); font-size: 18px; }
.day-next span { flex: 1 1 200px; padding-top: 10px; }
.day-next b { color: var(--text); }
.day-next .btn { margin-top: 8px; }
.pm-head.nt { text-align: center; }
.nt-title { font-family: var(--display); font-weight: 900; font-size: 40px; margin: 8px 0 4px; }
.nt-next { display: grid; justify-items: center; gap: 6px; margin-top: 10px; }
.nt-next small { color: rgba(255,255,255,.7); font-weight: 700; }
.nt-vs { display: flex; align-items: center; gap: 14px; }
.nt-vs .crest { width: 52px; height: 60px; }
.nt-when { font-size: 14px; color: #FFC845; font-weight: 800; }
.prematch .day-card { margin-top: 14px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head b { font-size: 17px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { text-align: center; font-size: 11px; font-weight: 800; color: var(--dim); padding-bottom: 4px; }
.cal-cell { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; align-content: center; gap: 1px; font-size: 14px; background: rgba(var(--fg), .03); position: relative; }
.cal-cell.empty { background: none; }
.cal-cell span { font-weight: 700; }
.cal-cell i { font-size: 13px; color: var(--gold-text); font-style: normal; display: grid; }
.cal-cell em { font-style: normal; font-size: 11px; font-weight: 800; }
.cal-cell.game { background: rgba(var(--acc), .12); }
.cal-cell.game.cup { background: rgba(90, 176, 255, .14); }
.cal-cell.game.cup i { color: var(--sky); }
.cal-cell.w { background: rgba(52, 199, 123, .18); } .cal-cell.w em { color: var(--ok-ink); }
.cal-cell.l { background: rgba(255, 93, 98, .14); } .cal-cell.l em { color: var(--bad-ink); }
.cal-cell.d em { color: var(--muted); }
.cal-cell.today { box-shadow: inset 0 0 0 2px var(--gold-text); }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 10px; }
.cal-legend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.lg.league { background: rgba(var(--acc), .6); } .lg.cup { background: rgba(90, 176, 255, .7); } .lg.w { background: rgba(52, 199, 123, .7); } .lg.l { background: rgba(255, 93, 98, .7); }
.cal-list { display: grid; gap: 8px; }
.cal-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(var(--fg), .03); border: 1px solid var(--line); }
.cal-row.cup { border-left: 3px solid var(--sky); } .cal-row.league { border-left: 3px solid var(--gold); }
.cal-row.past.w { border-left: 3px solid var(--grass); } .cal-row.past.l { border-left: 3px solid var(--red); } .cal-row.past.d { border-left: 3px solid var(--dim); }
.cal-when { width: 40px; text-align: center; flex: 0 0 auto; }
.cal-when b { display: block; font-family: var(--display); font-weight: 900; font-size: 24px; line-height: 1; }
.cal-when small { font-size: 10px; font-weight: 800; color: var(--muted); letter-spacing: .06em; }
.cal-what { flex: 1; min-width: 0; }
.cal-what small { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; }
.cal-what b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-days { font-size: 12px; font-weight: 800; color: var(--gold-text); white-space: nowrap; }
.cal-score { font-family: var(--display); font-weight: 900; font-size: 22px; }

/* ---------- v8: competições ---------- */
.cup-h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 18px 0 10px; }
.cup-groups { display: grid; gap: 12px; }
@media (min-width: 760px) { .cup-groups { grid-template-columns: repeat(2, 1fr); } }
.cup-group h3 { font-size: 15px; margin: 0 0 8px; }
.cup-group table { width: 100%; font-size: 13px; }
.cup-group td, .cup-group th { padding: 6px 4px; text-align: center; }
.cup-group td.tm { text-align: left; display: flex; align-items: center; gap: 6px; min-width: 0; }
.cup-group td.tm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.cup-group tr.q td:first-child { color: var(--grass); font-weight: 800; }
.cup-group tr.me td { background: rgba(var(--acc), .1); font-weight: 700; }
.tie-row b.leg { width: 22px; text-align: center; color: var(--muted); font-weight: 700; }
.tie-row b.agg { width: 26px; text-align: center; }
.b-round h3 small { font-size: 11px; color: var(--muted); font-weight: 700; margin-left: 6px; }
.tie.final { border-color: var(--gold-text); box-shadow: 0 0 0 3px rgba(var(--acc), .14); }
.mi-final { display: inline-flex; align-items: center; gap: 8px; margin: 2px auto 6px; padding: 6px 14px; border-radius: 999px; background: linear-gradient(90deg, #FFC845, #FFE08A); color: #2B1F00; font-family: var(--display); font-weight: 900; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 8px 26px rgba(255,200,69,.4); }
.mi-agg { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.75); margin-top: 4px; }
.tie-row.two { grid-template-columns: 24px minmax(0, 1fr) 22px 22px 26px; }
.tie-row.two span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- v8: seleção / Data Fifa ---------- */
.day-card.nat::before { background: linear-gradient(90deg, var(--gold), var(--sky)); }
.day-chip.nat { background: rgba(var(--acc), .16); color: var(--gold-text); }
.day-break { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); padding: 10px 12px; border-radius: 12px; background: rgba(var(--acc), .08); }
.day-break .ph { color: var(--gold-text); font-size: 18px; margin-top: 1px; }
.ds-day.game.nat i { color: var(--sky); }
.callup { text-align: center; display: grid; gap: 10px; justify-items: center; position: relative; padding-top: 6px; }
.callup::before { content: ""; position: absolute; inset: -22px -22px auto -22px; height: 120px; background: linear-gradient(135deg, var(--n1), var(--n2)); opacity: .9; border-radius: 22px 22px 0 0; z-index: -1; -webkit-mask: linear-gradient(#000 40%, transparent); mask: linear-gradient(#000 40%, transparent); }
.cu-flag .crest { width: 84px; height: 98px; filter: drop-shadow(0 10px 20px rgba(0,0,0,.35)); animation: cuPop .6s cubic-bezier(.2,1.4,.3,1) both; }
@keyframes cuPop { from { transform: scale(.3) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }
.cu-tag { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); }
.cu-title { font-family: var(--display); font-weight: 900; font-size: clamp(34px, 9vw, 48px); line-height: .95; margin: 0; text-transform: uppercase; animation: cuPop .5s .15s both; }
.cu-sub { color: var(--muted); margin: 0; }
.cu-next { display: grid; gap: 6px; justify-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(var(--fg), .05); border: 1px solid var(--line); width: 100%; }
.cu-next small { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.cu-vs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cu-vs span { color: var(--muted); }
.cu-note { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); margin: 0; }
.cu-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; }
.cu-confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: cuFall linear forwards; }
@keyframes cuFall { to { transform: translateY(110vh) rotate(720deg); opacity: .8; } }
.nat-panel { border-top: 4px solid var(--n1); }
.nat-recent { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.nat-recent span { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(var(--fg), .06); }
@media (prefers-reduced-motion: reduce) { .cu-confetti { display: none; } .cu-flag .crest, .cu-title { animation: none; } }

/* ---------- v8: imagem pública, redes e coletiva ---------- */
.img-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.img-score { width: 64px; height: 64px; border-radius: 18px; display: grid; place-content: center; text-align: center; background: rgba(var(--fg), .06); border: 1px solid var(--line-2); }
.img-score b { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; }
.img-score span { font-size: 11px; color: var(--muted); font-weight: 700; }
.img-score.good b { color: var(--grass); } .img-score.bad b { color: var(--red); }
.img-foll { display: flex; align-items: center; gap: 8px; } .img-foll .ph { font-size: 22px; color: var(--sky); } .img-foll b { display: block; font-size: 18px; } .img-foll span { color: var(--muted); font-size: 12px; }
.img-meters { display: grid; gap: 10px; }
.img-m-top { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 4px; }
.img-m-top .ph { color: var(--muted); } .img-m-top span { flex: 1; } .img-m-top b { font-size: 15px; }
.img-m-top em { font-style: normal; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; gap: 1px; }
.img-m-top em.up { color: var(--grass); } .img-m-top em.down { color: var(--red); }
.img-m .bar i { background: var(--sky); } .img-m.good .bar i { background: var(--grass); } .img-m.bad .bar i { background: var(--red); }
.img-hint { font-size: 13px; margin: 12px 0 0; }
.presser-card { display: flex; align-items: center; gap: 12px; border-color: var(--gold-text); background: linear-gradient(120deg, rgba(var(--acc), .14), transparent 70%); }
.presser-card > .ph { font-size: 30px; color: var(--gold-text); }
.presser-card div { flex: 1; } .presser-card b { display: block; } .presser-card span { font-size: 13px; color: var(--muted); }
.press { display: grid; gap: 14px; }
.press-top { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gold-text); }
.press-q { display: flex; gap: 12px; align-items: flex-start; }
.press-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); color: #fff; flex: 0 0 auto; font-size: 20px; }
.press-q p { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; background: rgba(var(--fg), .05); padding: 12px 14px; border-radius: 4px 16px 16px 16px; }
.press-a { display: grid; gap: 8px; }
.press-head { font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1.05; margin: 0; }
.press-fx { display: flex; flex-wrap: wrap; gap: 6px; }
.phone-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.phone-tabs a { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; font-weight: 700; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
.phone-tabs a.active { color: var(--text); border-bottom-color: var(--gold-text); }
.feed-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.feed-head b { display: block; } .feed-head span { font-size: 13px; color: var(--muted); }
.feed-img { display: flex; gap: 6px; } .feed-img span { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(var(--fg), .06); }
.feed-img span.good { color: var(--ok-ink); } .feed-img span.bad { color: var(--bad-ink); }
.feed { display: grid; }
.post { display: flex; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.post-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: rgba(var(--fg), .08); font-size: 18px; color: var(--muted); }
.post.press .post-av { background: rgba(90, 176, 255, .16); color: var(--sky); } .post.gossip .post-av { background: rgba(255, 93, 162, .14); color: #FF5DA2; }
.post-body { flex: 1; min-width: 0; }
.post-top { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.post-top span { color: var(--muted); font-size: 13px; } .post-top em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 800; color: var(--dim); text-transform: uppercase; }
.post-body p { margin: 4px 0 6px; line-height: 1.4; }
.post-meta { font-size: 13px; color: var(--muted); display: flex; gap: 4px; align-items: center; }
.post.neg .post-meta .ph { color: var(--red); } .post.pos .post-meta .ph { color: #FF5DA2; }
.post-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.post-reply { display: flex; gap: 6px; margin-top: 8px; font-size: 14px; color: var(--muted); padding: 8px 10px; border-radius: 10px; background: rgba(var(--fg), .04); }
.btn-danger-soft { background: rgba(255, 93, 98, .12); color: var(--bad-ink); border-color: rgba(255, 93, 98, .3); }

/* ---------- v8: navegação, transições, dicas, atalhos ---------- */
.page-in { animation: pgFade .22s ease-out both; }
.page-in.from-right { animation-name: pgRight; } .page-in.from-left { animation-name: pgLeft; }
@keyframes pgFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pgRight { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes pgLeft { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.page-skel { display: grid; gap: 14px; max-width: 760px; }
.pager { display: none; }
@media (max-width: 959px) {
  .pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 6px 14px 0; font-size: 12px; font-weight: 700; }
  .pager a { color: var(--dim); text-decoration: none; display: inline-flex; align-items: center; gap: 2px; }
  .pager a:last-child { justify-self: end; }
  .pager-dots { display: flex; gap: 5px; } .pager-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--fg), .18); transition: all .2s; }
  .pager-dots i.on { width: 18px; border-radius: 4px; background: var(--gold-text); }
}
.tip { display: flex; gap: 10px; align-items: flex-start; padding: 12px 12px 12px 14px; border-radius: 14px; margin-bottom: 14px; background: rgba(90, 176, 255, .12); border: 1px solid rgba(90, 176, 255, .3); font-size: 14px; animation: pgFade .3s ease-out; }
.tip > .ph { color: var(--sky); font-size: 20px; margin-top: 1px; } .tip span { flex: 1; } .tip .icon-btn { width: 30px; height: 30px; min-height: 30px; }
.shortcuts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sc { position: relative; display: grid; justify-items: center; gap: 4px; padding: 12px 4px 10px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 12px; font-weight: 700; transition: transform .12s, border-color .12s; }
.sc:hover { text-decoration: none; border-color: var(--gold-text); transform: translateY(-1px); }
.sc .ph { font-size: 24px; color: var(--gold-text); }
.sc em { position: absolute; top: 6px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-style: normal; font-size: 11px; display: grid; place-items: center; }
.nav-play.pulse a { animation: ctxPulse 1.6s ease-in-out infinite; }
.nav-play.calm a { background: var(--surface-2); color: var(--gold-text); box-shadow: 0 6px 16px rgba(0,0,0,.18), 0 0 0 5px var(--bg); }
@keyframes ctxPulse { 0%, 100% { box-shadow: 0 8px 22px rgba(var(--acc), .35), 0 0 0 5px var(--bg); } 50% { box-shadow: 0 8px 30px rgba(var(--acc), .65), 0 0 0 5px var(--bg), 0 0 0 11px rgba(var(--acc), .18); } }
.side-play span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-play.pulse { animation: ctxPulse 1.6s ease-in-out infinite; }
:root[data-reduce="1"] *, :root[data-reduce="1"] *::before, :root[data-reduce="1"] *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
@media (prefers-reduced-motion: reduce) { .page-in, .nav-play.pulse a, .side-play.pulse { animation: none; } }
.icon-btn { min-width: 40px; min-height: 40px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.switch-row span { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.switch-row input { width: 44px; height: 24px; appearance: none; -webkit-appearance: none; border-radius: 12px; background: rgba(var(--fg), .18); position: relative; cursor: pointer; transition: background .15s; flex: 0 0 auto; }
.switch-row input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch-row input:checked { background: var(--grass); } .switch-row input:checked::after { transform: translateX(20px); }
html.big-text { font-size: 112.5%; } html.big-text body { font-size: 17px; }
.tipbox { max-width: 1120px; margin: 0 auto; padding: 12px 16px 0; }
.tipbox .tip { margin-bottom: 0; }
@media (min-width: 960px) { .tipbox { padding: 18px 16px 0; } }

/* ---------- v8: loja ---------- */
.plans { display: grid; gap: 14px; }
@media (min-width: 700px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { border-radius: 20px; padding: 20px; background: var(--bg-2); border: 1px solid var(--line-2); display: grid; gap: 10px; align-content: start; }
.plan.hot { background: radial-gradient(120% 120% at 100% 0%, rgba(var(--acc), .2), transparent 60%), var(--bg-2); border-color: var(--gold-text); box-shadow: 0 10px 30px rgba(var(--acc), .15); }
.plan-top { display: flex; align-items: center; gap: 8px; font-size: 17px; } .plan-top .ph { color: var(--gold-text); font-size: 22px; }
.plan-tag { margin-left: auto; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); text-transform: uppercase; }
.plan-price { font-family: var(--display); font-weight: 900; font-size: 40px; line-height: 1; } .plan-price small { font-family: var(--body); font-size: 15px; color: var(--muted); font-weight: 600; margin-left: 4px; }
.plan p { margin: 0; color: var(--muted); font-size: 14px; } .plan-extra { display: flex; align-items: center; gap: 6px; color: var(--text) !important; font-weight: 700; }
.founder { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding: 18px 20px; border-radius: 20px; color: #fff; background: linear-gradient(120deg, #3A2A00, #8A6400 50%, #FFC845); border: 1px solid rgba(255,255,255,.2); }
.founder > .ph { font-size: 40px; color: #FFF3C4; } .founder div { flex: 1 1 220px; } .founder h2 { margin: 2px 0 4px; font-family: var(--display); font-weight: 900; font-size: 28px; } .founder p { margin: 0; color: rgba(255,255,255,.88); font-size: 14px; } .founder .ob-tag { color: #FFF3C4; }
.packs-v { display: grid; gap: 10px; }
@media (min-width: 560px) { .packs-v { grid-template-columns: repeat(3, 1fr); } }
.pack-v { padding: 14px; border-radius: 16px; border: 1px solid var(--line-2); display: grid; gap: 8px; align-content: start; }
.pack-v ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--muted); } .pack-v li { display: flex; gap: 6px; align-items: center; }
.pack-v.owned { opacity: .7; }
.pack { display: grid; justify-items: center; gap: 2px; padding: 14px 8px; border-radius: 14px; border: 1px dashed var(--line-2); background: none; color: var(--text); cursor: pointer; font: inherit; }
.pack.hot { border-style: solid; border-color: var(--gold-text); } .pack small { font-size: 11px; color: var(--grass); font-weight: 800; } .pack[disabled] { cursor: default; opacity: .7; }
.coupon { display: flex; gap: 8px; } .coupon .input { flex: 1; text-transform: uppercase; }
.orders { display: grid; gap: 6px; font-size: 14px; } .orders div { display: flex; gap: 10px; align-items: center; } .orders span { flex: 1; color: var(--muted); }
.orders em { font-style: normal; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: rgba(var(--fg), .06); } .orders em.paid { color: var(--ok-ink); } .orders em.rejected, .orders em.cancelled { color: var(--bad-ink); }
.pay-wait, .pay-ok { text-align: center; display: grid; gap: 6px; justify-items: center; } .pay-wait .ph, .pay-ok .ph { font-size: 44px; color: var(--gold-text); } .pay-ok .ph { color: var(--grass); }
.callout.good { border-color: rgba(52,199,123,.4); background: rgba(52,199,123,.1); }
.mx-retry { justify-self: center; font-size: 13px; }

/* ---------- v8: master chuteiras ---------- */
.m-boots { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.m-boot { display: grid; gap: 4px; justify-items: start; padding: 14px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.m-boot:hover { border-color: var(--gold-text); } .m-boot.off { opacity: .5; }
.m-boot small { color: var(--grass); font-weight: 700; font-size: 12px; } .m-boot span { color: var(--muted); font-size: 13px; }
.m-boot.new { place-content: center; justify-items: center; border-style: dashed; min-height: 150px; } .m-boot.new .ph { font-size: 28px; color: var(--gold-text); }
.boot-svg { width: 100%; max-width: 160px; height: auto; }
.mbe-prev { display: grid; place-items: center; padding: 10px; border-radius: 14px; background: rgba(var(--fg), .05); margin: 8px 0 12px; } .mbe-prev .boot-svg { max-width: 220px; }
.mbe-stats { display: grid; gap: 8px; margin: 6px 0 12px; }
.mbe-sk { display: grid; grid-template-columns: 100px 1fr 34px; align-items: center; gap: 10px; font-size: 14px; } .mbe-sk b { color: var(--grass); text-align: right; }
.mbe-col { display: flex; align-items: center; gap: 8px; font-size: 14px; } .mbe-col input[type=color] { width: 40px; height: 32px; border: 0; background: none; padding: 0; }
.ev-banner { display: flex; align-items: center; gap: 10px; margin: 8px auto 0; width: min(1180px, calc(100% - 32px)); padding: 9px 14px; border-radius: 12px; font-size: 14px;
  background: linear-gradient(90deg, rgba(255, 200, 69, .22), rgba(255, 200, 69, .06)); border: 1px solid rgba(255, 200, 69, .45); color: var(--text); }
.ev-banner .ph { color: var(--gold-text); font-size: 18px; }

/* ---------- v8: amigos, duelos, convites ---------- */
.fr-tabs { margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.fr-tabs a { flex: 1; min-height: 38px; border-radius: 9px; color: var(--muted); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; padding: 0 10px; text-decoration: none; }
.fr-tabs a.on { background: var(--gold); color: var(--gold-ink); }
.fr-tabs em { font-style: normal; font-size: 11px; background: var(--red, #DE3F46); color: #fff; border-radius: 99px; padding: 1px 6px; }
.fr-add { display: flex; align-items: center; gap: 8px; } .fr-add .input { flex: 1; min-width: 0; } .fr-at { font-weight: 800; color: var(--muted); font-size: 18px; }
.fr-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(var(--fg), .035); min-width: 0; }
.fr-main { flex: 1; min-width: 0; display: grid; } .fr-main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fr-main small { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-av { width: 42px; height: 46px; flex: none; border-radius: 12px; background: rgba(var(--fg), .06); display: grid; place-items: end center; overflow: hidden; }
.fr-av.sm { width: 34px; height: 38px; } .fr-av.lg { width: 84px; height: 96px; margin: 0 auto 8px; border-radius: 20px; }
.fr-av.empty { place-items: center; color: var(--muted); }
.fr-svg { width: 130%; height: auto; margin-bottom: -38%; image-rendering: pixelated; }
.fr-av.lg .fr-svg { margin-bottom: -30%; }
.fr-ovr { font-family: var(--display, inherit); font-weight: 900; font-size: 20px; color: var(--gold-text); }
.fr-on { width: 9px; height: 9px; border-radius: 50%; background: var(--grass); box-shadow: 0 0 0 3px rgba(23, 160, 92, .2); }
.fr-acts { display: flex; gap: 6px; }
.fr-btn { all: unset; display: block; cursor: pointer; border-radius: 14px; } .fr-btn:hover .fr-row { background: rgba(var(--fg), .07); } .fr-btn:focus-visible { outline: 2px solid var(--gold); }
.founder-tag { color: var(--gold-text); font-size: 14px; }
.empty-mini { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 18px 8px; color: var(--muted); font-size: 14px; } .empty-mini > .ph-duotone { font-size: 34px; color: var(--gold-text); }
.chips-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-btn { border: 1px solid var(--line-2); background: transparent; color: var(--muted); border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.chip-btn.on { background: var(--gold); color: var(--gold-ink); border-color: transparent; }
.fr-league .rank-row { grid-template-columns: 30px 34px minmax(0, 1fr) auto; padding: 8px 12px; border-radius: 12px; border-top: 0; background: rgba(var(--fg), .03); }
.fr-league .pos { font-weight: 900; text-align: center; color: var(--muted); } .fr-league .pos.top1, .fr-league .pos.top2, .fr-league .pos.top3 { color: var(--gold-text); }
.fr-league .rank-row > div { min-width: 0; } .fr-league .rank-row small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duel-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(var(--fg), .035); border: 1px solid transparent; }
.duel-row.gold { border-color: rgba(255, 200, 69, .55); background: rgba(255, 200, 69, .08); }
.duel-vs { display: flex; gap: 6px; align-items: baseline; min-width: 0; flex-wrap: wrap; font-size: 14px; } .duel-vs span { color: var(--muted); font-size: 12px; }
.duel-sc { display: flex; gap: 6px; align-items: baseline; } .duel-sc b { font-family: var(--display, inherit); font-size: 22px; } .duel-sc small { color: var(--muted); font-size: 12px; }
.duel-acts { grid-column: 1 / -1; display: flex; gap: 8px; }
.invite-card .inv-top { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; } .invite-card .inv-top > .ph-duotone { font-size: 40px; color: var(--gold-text); flex: none; }
.invite-card h2 { margin: 0 0 4px; } .invite-card p { margin: 0; color: var(--muted); font-size: 14px; }
.inv-link { display: flex; gap: 8px; } .inv-link .input { flex: 1; min-width: 0; font-size: 14px; }
.fr-modal { text-align: center; } .fr-modal h3 { margin: 4px 0 0; } .fr-modal .modal-actions { flex-wrap: wrap; justify-content: center; }

/* ---------- v8: retrospectiva (stories) e lesão ---------- */
.retro-card, .injury-card { display: flex; align-items: center; gap: 14px; }
.retro-card > div:nth-child(2), .injury-card > div { flex: 1; min-width: 0; display: grid; gap: 2px; } .retro-card span, .injury-card span { color: var(--muted); font-size: 14px; }
.retro-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #FFC845, #FF7A45); color: #1a1205; flex: none; } .retro-ic .ph-duotone { font-size: 26px; }
.injury-card { border-color: rgba(222, 63, 70, .45); background: linear-gradient(90deg, rgba(222, 63, 70, .10), transparent); } .injury-card > .ph-duotone { font-size: 32px; color: #DE3F46; flex: none; }
.inj-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; } .inj-head > .ph-duotone { font-size: 34px; color: #DE3F46; } .inj-head h3 { margin: 0; }
.inj-opt { display: flex; gap: 12px; align-items: flex-start; text-align: left; } .inj-opt > .ph-duotone { font-size: 26px; color: var(--sky); flex: none; margin-top: 2px; } .inj-opt > span { display: grid; gap: 2px; } .inj-opt .muted { font-size: 14px; font-weight: 400; }
.choice-btn.risk .inj-opt > .ph-duotone { color: #DE3F46; }
.rs-open { width: 32px; height: 32px; }

.retro { position: fixed; inset: 0; z-index: 400; color: #fff; background: radial-gradient(120% 80% at 20% 0%, var(--t1) 0%, #0A1330 55%, #04070F 100%); display: grid; overflow: hidden; touch-action: manipulation; user-select: none; }
.retro::before { content: ''; position: absolute; inset: 0; opacity: .07; background: repeating-linear-gradient(115deg, #fff 0 34px, transparent 34px 90px); pointer-events: none; }
.rs-bars { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; gap: 4px; z-index: 3; }
.rs-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .28); overflow: hidden; } .rs-bars b { display: block; height: 100%; width: 0; background: #fff; }
.rs-x { position: absolute; top: calc(max(12px, env(safe-area-inset-top)) + 12px); right: 10px; z-index: 4; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .25); color: #fff; font-size: 20px; cursor: pointer; display: grid; place-items: center; }
.rs-stage { position: relative; display: grid; place-items: center; width: min(460px, 100%); margin: 0 auto; padding: 70px 26px 40px; }
.rs-nav { position: absolute; top: 60px; bottom: 120px; width: 34%; border: 0; background: transparent; cursor: pointer; z-index: 2; } .rs-nav.prev { left: 0; } .rs-nav.next { right: 0; width: 66%; }
.rs-slide { grid-area: 1 / 1; width: 100%; text-align: center; display: grid; justify-items: center; align-content: center; gap: 10px; opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .45s, transform .45s; pointer-events: none; }
.rs-slide.on { opacity: 1; transform: none; pointer-events: auto; }
.rs-slide small { text-transform: uppercase; letter-spacing: .16em; font-size: 13px; font-weight: 800; color: #FFC845; }
.rs-slide h1 { font-family: var(--display, inherit); font-size: clamp(40px, 11vw, 72px); line-height: .95; margin: 0; text-transform: uppercase; }
.rs-slide h2 { font-family: var(--display, inherit); font-size: clamp(30px, 8vw, 44px); line-height: 1.05; margin: 0; text-transform: uppercase; display: grid; gap: 4px; }
.rs-slide h2 em { font-style: normal; color: #FFC845; font-size: 1.3em; }
.rs-slide p { margin: 0; color: rgba(255, 255, 255, .8); font-size: 17px; line-height: 1.45; } .rs-slide p b { color: #fff; font-size: 20px; }
.rs-av { width: 180px; height: 220px; display: grid; place-items: end center; overflow: hidden; } .rs-avatar { width: 230px; height: auto; image-rendering: pixelated; margin-bottom: -60px; }
.rs-big { display: grid; justify-items: center; } .rs-big b { font-family: var(--display, inherit); font-size: clamp(96px, 30vw, 150px); line-height: .9; color: #FFC845; } .rs-big span { font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.rs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 10px; } .rs-grid.three { grid-template-columns: repeat(3, 1fr); }
.rs-grid > div { padding: 14px 8px; border-radius: 16px; background: rgba(255, 255, 255, .08); display: grid; } .rs-grid b { font-family: var(--display, inherit); font-size: 34px; line-height: 1; } .rs-grid span { font-size: 13px; color: rgba(255, 255, 255, .7); }
.rs-note { display: inline-flex; gap: 6px; align-items: center; color: #FFC845 !important; font-weight: 700; }
.rs-trophy .ph-duotone { font-size: 120px; color: #FFC845; filter: drop-shadow(0 10px 30px rgba(255, 200, 69, .45)); } .rs-trophy.dim .ph-duotone { color: rgba(255, 255, 255, .55); filter: none; }
.rs-pos { font-family: var(--display, inherit); font-size: clamp(110px, 34vw, 170px); line-height: .9; color: #FFC845; }
.rs-wdl { display: flex; gap: 10px; margin-top: 8px; } .rs-wdl > div { min-width: 86px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .08); display: grid; } .rs-wdl b { font-size: 28px; font-family: var(--display, inherit); } .rs-wdl span { font-size: 12px; color: rgba(255, 255, 255, .7); }
.rs-wdl .w b { color: #34C77B; } .rs-wdl .l b { color: #FF7A7A; }
.rs-hon { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 10px; width: 100%; text-align: left; }
.rs-hon li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); } .rs-hon .ph-duotone { font-size: 30px; color: #FFC845; flex: none; }
.rs-hon span { display: grid; } .rs-hon em { font-style: normal; font-size: 13px; color: rgba(255, 255, 255, .7); }
.rs-actions { display: grid; gap: 10px; width: 100%; margin-top: 18px; position: relative; z-index: 3; } .rs-ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: transparent; }
.s-champ { --g: 1; }
[data-reduce="1"] .rs-slide { transition: none; }
@media (prefers-reduced-motion: reduce) { .rs-slide { transition: none; } }

/* ---------- v8: landing ---------- */
.landing { padding: 8px 16px 40px; max-width: 1160px; margin: 0 auto; }
.ld-sec { padding: 40px 0 8px; } .ld-kicker { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 800; color: var(--gold-text); }
.ld-sec h2, .ld-cta h2 { font-family: var(--display); font-weight: 900; font-size: clamp(32px, 7vw, 52px); line-height: .98; margin: 6px 0 20px; text-transform: uppercase; }
.ld-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.ld-step { position: relative; padding: 22px 20px; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.ld-step em { position: absolute; right: 14px; top: 4px; font-style: normal; font-family: var(--display); font-weight: 900; font-size: 72px; color: rgba(var(--fg), .06); }
.ld-step > .ph-duotone, .ld-feat > .ph-duotone { font-size: 34px; color: var(--gold-text); }
.ld-step h3, .ld-feat h3 { font-size: 18px; margin: 10px 0 4px; } .ld-step p, .ld-feat p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.ld-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.ld-feat { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r-lg); background: rgba(var(--fg), .03); border: 1px solid var(--line); } .ld-feat h3 { margin-top: 0; }
.ld-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; max-width: 760px; }
.ld-plan { padding: 22px; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); } .ld-plan.hot { border-color: var(--gold-text); box-shadow: 0 0 0 1px var(--gold-text) inset; }
.ld-plan h3 { margin: 0; font-size: 18px; } .ld-plan > b { display: block; font-family: var(--display); font-size: 40px; margin: 6px 0 10px; } .ld-plan small { font-size: 16px; color: var(--muted); font-family: var(--body); }
.ld-plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .ld-plan li { display: flex; gap: 8px; font-size: 15px; } .ld-plan li .ph { color: var(--grass); margin-top: 3px; }
.ld-note { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; margin-top: 14px; } .ld-note .ph { color: var(--gold-text); }
.ld-cta { text-align: center; padding: 48px 20px; margin-top: 36px; border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(255, 200, 69, .18), rgba(var(--fg), .03)); border: 1px solid var(--line); }
.ld-foot { text-align: center; color: var(--muted); font-size: 13px; padding: 28px 0 0; }
@media (max-width: 440px) { .fr-tabs a { padding: 0 6px; font-size: 13px; } .fr-tabs a > .ph { display: none; } }

/* ---------- v9: Redes (rede social única) ---------- */
.sn { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1080px) { .sn { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .sn-side { position: sticky; top: 90px; } }
.sn-main { min-width: 0; }
.sn-me { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; margin-bottom: 14px; }
.sn-me-top { display: flex; align-items: center; gap: 12px; }
.sn-me-id { flex: 1; min-width: 0; display: grid; } .sn-me-id b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sn-me-id span { color: var(--muted); font-size: 13px; }
.sn-meters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sn-meters span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 5px 10px; border-radius: 999px; background: rgba(var(--fg), .05); color: var(--muted); }
.sn-meters span b { color: var(--text); } .sn-meters span.good b { color: var(--ok-ink); } .sn-meters span.bad b { color: var(--bad-ink); }
.sn-tabs { margin-bottom: 12px; }
.sn-tabs a { flex: 1; min-height: 40px; border-radius: 9px; color: var(--muted); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; white-space: nowrap; padding: 0 8px; }
.sn-tabs a.on { background: var(--gold); color: var(--gold-ink); }
.sn-tabs em { font-style: normal; font-size: 11px; background: #DE3F46; color: #fff; border-radius: 99px; padding: 1px 6px; }
@media (max-width: 440px) { .sn-tabs a { font-size: 13px; padding: 0 4px; } .sn-tabs a > .ph-fill { display: none; } }
.sn-filter { margin: -2px 0 12px; }
.sn-feed { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.sn-post { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px; border-top: 1px solid var(--line); animation: feedIn .25s ease-out; }
.sn-post:first-child { border-top: 0; }
.sn-post.neg { background: linear-gradient(90deg, rgba(222, 63, 70, .05), transparent 40%); }
.sn-post.me { background: linear-gradient(90deg, rgba(var(--acc), .07), transparent 50%); }
.sn-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #fff; background: hsl(var(--h, 210) 55% 46%); overflow: hidden; flex: none; }
.sn-av.out { border-radius: 12px; background: var(--c); letter-spacing: -.02em; }
.sn-av.meme { background: linear-gradient(135deg, #FFC845, #FF7A45); color: #2B1F00; font-size: 22px; }
.sn-av.club { background: linear-gradient(135deg, #1F3B8C, #0B1C47); font-size: 22px; }
.sn-av.pl { background: rgba(var(--fg), .07); } .sn-av.lg { width: 56px; height: 56px; }
.sn-head { width: 100%; height: 100%; image-rendering: pixelated; }
.sn-body { min-width: 0; }
.sn-top { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 14.5px; line-height: 1.3; }
.sn-top > span { color: var(--muted); font-size: 13px; }
.sn-top em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 800; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; display: inline-flex; gap: 4px; align-items: center; }
.sn-seal { color: #1D9BF0; display: inline-flex; font-size: 15px; }
.sn-title { font-size: 17px; line-height: 1.3; margin: 6px 0 2px; font-weight: 800; }
.sn-text { margin: 5px 0 0; line-height: 1.5; font-size: 15px; overflow-wrap: anywhere; }
.sn-post.meme .sn-text { font-weight: 600; }
.sn-read { margin-top: 8px; display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line-2); background: rgba(var(--fg), .03); color: var(--text); border-radius: 10px; padding: 7px 12px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.sn-read:hover { border-color: var(--gold-text); }
.sn-about { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(var(--fg), .04); font-size: 13px; color: var(--muted); min-width: 0; }
.sn-about span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sn-about b { color: var(--text); }
.sn-mini { width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--fg), .08); flex: none; image-rendering: pixelated; } .sn-mini.lg { width: 40px; height: 40px; }
.sn-follow { border: 1px solid var(--gold-text); color: var(--gold-text); background: transparent; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; flex: none; }
.sn-follow.on { background: var(--gold); color: var(--gold-ink); border-color: transparent; }
.sn-myreply { display: flex; gap: 6px; margin-top: 8px; font-size: 14px; color: var(--muted); } .sn-myreply b { color: var(--text); }
.sn-replies { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; } .sn-replies small { color: var(--muted); font-weight: 700; margin-right: 2px; }
.sn-acts { display: flex; gap: 18px; margin-top: 10px; }
.sn-act { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; padding: 4px 0; }
.sn-act:hover { color: var(--text); } .sn-act.on { color: #F0466B; } .sn-act.static { cursor: default; }
.sn-act .ph, .sn-act .ph-fill { font-size: 18px; }
.sn-act.pop .ph-fill { animation: snPop .4s ease-out; }
@keyframes snPop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.sn-more { text-align: center; padding: 12px; }
.sn-side { display: grid; gap: 16px; }
.sn-trend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sn-trend button { all: unset; display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px; padding: 9px 6px; border-radius: 10px; cursor: pointer; width: 100%; box-sizing: border-box; }
.sn-trend button:hover { background: rgba(var(--fg), .04); }
.sn-trend em { grid-row: span 2; font-style: normal; font-weight: 900; color: var(--gold-text); font-family: var(--display); font-size: 20px; }
.sn-trend span { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sn-trend span b { display: block; font-size: 12.5px; color: var(--muted); }
.sn-trend small { color: var(--dim); font-size: 12px; }
.sn-sug { display: grid; gap: 10px; } .sn-sug-row { display: flex; align-items: center; gap: 10px; } .sn-sug-row > div { flex: 1; min-width: 0; display: grid; } .sn-sug-row small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-note { font-size: 13px; display: flex; gap: 6px; }
/* matéria aberta */
.sn-modal { max-height: min(78vh, 760px); overflow-y: auto; margin: -4px -4px 0; padding: 4px; }
.sn-mtop { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .sn-mtop > div:not(.sn-av) { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .sn-mtop span { color: var(--muted); font-size: 13px; width: 100%; }
.sn-mtitle { font-family: var(--display); font-size: 30px; line-height: 1.05; margin: 8px 0 6px; text-transform: none; }
.sn-mtext { font-size: 16px; line-height: 1.5; margin: 6px 0; }
.sn-article { border-left: 3px solid var(--gold); padding: 2px 0 2px 14px; margin: 12px 0; } .sn-article p { margin: 0 0 10px; line-height: 1.6; font-size: 15.5px; }
.sn-acts.big { padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sn-thread { display: grid; gap: 12px; margin: 14px 0; }
.sn-cm { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; } .sn-cm .sn-av { width: 34px; height: 34px; font-size: 12px; }
.sn-cm p { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.sn-cm.me > div { background: rgba(var(--acc), .08); border-radius: 12px; padding: 6px 10px; }
.sn-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; position: sticky; bottom: -4px; background: var(--bg-2); padding: 10px 0 4px; border-top: 1px solid var(--line); }
.sn-presets small { color: var(--muted); font-weight: 700; width: 100%; }
.sn-compose h3 { display: flex; gap: 8px; align-items: center; margin: 0; } .sn-opts { display: grid; gap: 8px; margin-top: 12px; }
/* resumo no Início */
.sn-mini-list { display: grid; gap: 4px; }
.sn-mini-row { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; cursor: pointer; }
.sn-mini-row:hover { background: rgba(var(--fg), .04); }
.sn-mini-row .sn-av { width: 36px; height: 36px; font-size: 12px; }
.sn-mini-row div { display: grid; min-width: 0; } .sn-mini-row b { font-size: 13px; display: flex; gap: 4px; align-items: center; } .sn-mini-row b .ph-fill { color: #1D9BF0; }
.sn-mini-row span { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sn-mini-row small { color: var(--dim); font-size: 12px; }

@media (max-width: 440px) { .sn-top em span { display: none; } .sn-post { padding: 14px 12px; gap: 10px; grid-template-columns: 40px minmax(0, 1fr); } .sn-av { width: 40px; height: 40px; } }

/* ---------- v9: chuteiras com o visual do modelo ---------- */
.gear-art.boots { width: 100%; display: grid; place-items: center; min-height: 54px; }
.gear-boot { width: 92px; height: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.gear-brand { color: var(--muted); font-size: 12px; }
.si-ic.boots { width: 100%; display: grid; place-items: center; }
.si-boot { width: 96px; height: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.si-stats { font-style: normal; color: var(--grass); font-size: 12px; font-weight: 700; }

/* ---------- v9: loja redesenhada ---------- */
.gem-ic { color: #38BDF8; display: inline-flex; filter: drop-shadow(0 1px 2px rgba(56, 189, 248, .45)); }
.gem-bal { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(14, 26, 58, .06); }
.gem-bal .gem-ic { font-size: 24px; } .gem-bal div { display: grid; line-height: 1.1; } .gem-bal b { font-family: var(--display); font-size: 24px; } .gem-bal span { font-size: 12px; color: var(--muted); }
.btn.soon { display: inline-flex; flex-direction: column; align-items: center; gap: 0; opacity: 1; background: rgba(var(--fg), .03); border: 1px dashed var(--line-2); color: var(--text); line-height: 1.15; }
.btn.soon em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.founder { position: relative; overflow: hidden; }
.founder .fd-ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); flex: none; }
.founder .fd-ic .ph-duotone { font-size: 38px; color: #FFF3C4; }
.founder .fd-txt { flex: 1 1 240px; }
.founder .btn.soon { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); color: #fff; } .founder .btn.soon em { color: rgba(255, 255, 255, .8); }
.shop-sec { margin-top: 16px; }
.packs-v { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pack-v { padding: 14px; border-radius: 18px; border: 1px solid var(--line-2); display: grid; gap: 10px; grid-template-rows: auto auto 1fr auto; min-width: 0; background: linear-gradient(180deg, rgba(var(--fg), .03), transparent 60%); }
.pk-art { display: flex; gap: 6px; align-items: center; justify-content: center; min-height: 64px; border-radius: 12px; background: radial-gradient(circle at 50% 30%, rgba(var(--acc), .18), transparent 70%), rgba(var(--fg), .04); padding: 8px; }
.pk-it { display: grid; place-items: center; } .pk-it .ph-duotone { font-size: 30px; color: var(--gold-text); } .pk-boot { width: 64px; height: auto; }
.pk-buy .btn { width: 100%; }
.shop-cols { display: grid; gap: 16px; margin-top: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .shop-cols { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.packs { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important; gap: 10px; }
.pack { position: relative; opacity: 1 !important; padding: 18px 8px 12px; border-style: solid; background: linear-gradient(180deg, rgba(56, 189, 248, .08), transparent 70%); }
.pack.hot { background: linear-gradient(180deg, rgba(var(--acc), .16), transparent 70%); }
.pk-tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10.5px; font-weight: 800; white-space: nowrap; padding: 2px 8px; border-radius: 99px; background: var(--gold); color: var(--gold-ink); text-transform: uppercase; }
.gem-stack { display: flex; justify-content: center; margin-bottom: 4px; } .gem-stack .gem-ic { font-size: 26px; } .gem-stack .gem-ic + .gem-ic { margin-left: -12px; }
.pack b { font-size: 24px !important; }
@media (min-width: 960px) { .sidenav { overflow-y: auto; scrollbar-width: thin; } }
.pack .gem-ic, .gem-bal .gem-ic, .gem-stack .gem-ic { color: #38BDF8 !important; }
.pack-v ul { align-content: start; }

.sn-writing { display: flex; align-items: center; gap: 4px; margin: 12px 0; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.sn-writing i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-text); animation: snDot 1s infinite ease-in-out; }
.sn-writing i:nth-child(2) { animation-delay: .15s; } .sn-writing i:nth-child(3) { animation-delay: .3s; } .sn-writing span { margin-left: 6px; }
@keyframes snDot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }