/* =========================================================
   CABEÇUDOS FC 6.0 — estilos
   Base (componentes da 4.x) + camada 6.0 no fim do arquivo.
   ========================================================= */
:root {
  --bg: #27444b;
  --bg2: #22393f;
  --panel: #2f525a;
  --panel2: #36606a;
  --line: #487c86;
  --text: #f6f4e4;
  --muted: #a9c6be;
  --lime: #a4d596;
  --lime-d: #6f9f62;
  --orange: #f5af6c;
  --orange-d: #c27a3a;
  --sky: #e4e1a1;
  --red: #e46247;
  --gold: #f5af6c;
  --radius: 16px;
  --display: "Lilita One", "Poppins", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(1200px 600px at 50% -10%, #3a6a73 0%, transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 60px, transparent 60px 120px),
    var(--bg);
  color: var(--text);
  font-family: "Poppins", system-ui, sans-serif;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }
code { background: rgba(255,255,255,.08); padding: 1px 6px; border-radius: 6px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.hidden { display: none !important; }

#app { min-height: 100vh; }
.screen { display: none; min-height: 100vh; }
.screen.active { display: block; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- buttons ---------- */
.btn {
  border: 0; border-radius: 12px; padding: 12px 20px;
  background: var(--panel2); color: var(--text);
  font-family: var(--display); font-size: 1.1rem; letter-spacing: .5px;
  box-shadow: 0 4px 0 #1a3238, inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .08s, filter .15s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #1a3238; }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
.btn.lime { background: var(--lime); color: #1d3439; box-shadow: 0 5px 0 var(--lime-d); }
.btn.orange { background: var(--orange); color: #fff; box-shadow: 0 5px 0 var(--orange-d); }
.btn.red { background: var(--red); color: #fff; box-shadow: 0 5px 0 #a53d28; }
.btn.xl { width: 100%; padding: 16px; font-size: 1.4rem; margin-top: 10px; }
.btn.sm { padding: 8px 14px; font-size: .95rem; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }

/* ---------- menu ---------- */
.menu-wrap { max-width: 980px; margin: 0 auto; padding: 32px 16px 24px; }
.brand { display: flex; align-items: center; gap: 18px; justify-content: center; margin-bottom: 10px; }
.brand-logo { width: 120px; height: 120px; filter: drop-shadow(0 8px 24px rgba(164,213,150,.25)); animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-3deg); } }
.brand-name { font-family: var(--display); font-size: clamp(2.6rem, 8vw, 5rem); margin: 0; line-height: .9; letter-spacing: 1px;
  color: #fff; text-shadow: 0 5px 0 #142a2e, 0 0 30px rgba(228,225,161,.25); -webkit-text-stroke: 2px #142a2e; }
.brand-name span { color: var(--lime); margin-left: 10px; font-size: .6em; vertical-align: top; }
.brand-tag { margin: 6px 0 0; color: var(--muted); font-weight: 500; }
.name-chip { display: block; margin: 8px auto 22px; background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; }
.name-chip span { color: var(--lime); margin-left: 6px; }
.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.mbtn {
  display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; align-items: center; text-align: left;
  background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: 0 6px 0 #152a2e; transition: transform .1s, border-color .15s;
}
.mbtn:hover { transform: translateY(-2px); border-color: var(--sky); }
.mbtn:active { transform: translateY(3px); box-shadow: 0 2px 0 #152a2e; }
.mbtn i { grid-row: span 2; font-style: normal; font-size: 2.1rem; }
.mbtn b { font-family: var(--display); font-size: 1.45rem; font-weight: 400; }
.mbtn small { color: var(--muted); }
.mbtn.big { padding: 22px 20px; }
.mbtn.lime { background: linear-gradient(180deg, #bfe5b2, var(--lime)); color: #1d3439; border-color: #d6efcc; box-shadow: 0 6px 0 var(--lime-d); }
.mbtn.lime small { color: #2f5a3a; }
.mbtn.orange { background: linear-gradient(180deg, #f8c189, var(--orange)); border-color: #fbd6ae; box-shadow: 0 6px 0 var(--orange-d); }
.mbtn.orange small { color: #fff1e2; }
.menu-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; font-size: .9rem; }
.vol { display: flex; align-items: center; gap: 8px; }
input[type=range] { accent-color: var(--lime); }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(20,40,44,.7); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(6px); }
.topbar h2 { font-family: var(--display); font-weight: 400; margin: 0; font-size: 1.6rem; }
.topbar .spacer { flex: 1; }
.back { background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; font-weight: 700; }
.pill { background: var(--panel2); border-radius: 999px; padding: 6px 12px; font-weight: 700; }
.pill:empty { display: none; }

/* ---------- panels / options ---------- */
.panel { background: linear-gradient(180deg, var(--panel), #284850); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.panel h3 { font-family: var(--display); font-weight: 400; font-size: 1.35rem; margin: 0 0 12px; }
.setup { max-width: 920px; margin: 0 auto; padding: 22px 16px 40px; }
.vs-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
.vs-row.single { grid-template-columns: 1fr 1fr; }
.vs-badge { align-self: center; font-family: var(--display); font-size: 2.4rem; color: var(--orange); text-shadow: 0 4px 0 #142a2e; }
.pick-card { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 2px solid var(--line); border-radius: var(--radius); padding: 16px; text-align: center; position: relative; overflow: hidden; }
.pick-card:empty { display: none; }
.pick-card .role { font-family: var(--display); font-size: 1rem; letter-spacing: 1px; color: var(--muted); }
.pick-card .head { width: 130px; height: 130px; display: block; margin: 4px auto; }
.pick-card .pname { font-family: var(--display); font-size: 1.5rem; }
.pick-card .tname { display: flex; align-items: center; gap: 8px; justify-content: center; color: var(--muted); font-weight: 600; margin: 4px 0 10px; }
.pick-card .stripe { position: absolute; inset: 0 0 auto 0; height: 6px; }
.stats { display: grid; gap: 5px; margin: 8px auto 12px; max-width: 240px; text-align: left; font-size: .8rem; }
.stat { display: grid; grid-template-columns: 70px 1fr 22px; align-items: center; gap: 8px; color: var(--muted); }
.stat .bar { height: 8px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
.stat .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sky), var(--lime)); border-radius: 99px; }
.stat b { color: var(--text); }
.opts { display: grid; gap: 14px; margin-top: 18px; }
.opts.compact { margin-top: 0; gap: 10px; }
.opt { display: grid; gap: 6px; }
.opt > label { font-weight: 700; color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .8px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { flex: 1 1 auto; background: rgba(255,255,255,.05); border: 2px solid var(--line); border-radius: 10px; padding: 9px 12px; font-weight: 700; }
.seg button.on { background: var(--lime); color: #1d3439; border-color: var(--lime); }
.seg.locked button { pointer-events: none; }
.seg.locked button:not(.on) { opacity: .45; }

/* ---------- modal / picker ---------- */
.modal { position: fixed; inset: 0; background: rgba(10,22,24,.75); backdrop-filter: blur(4px); z-index: 50; display: grid; place-items: center; padding: 16px; }
.modal-box { width: min(1100px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--bg2); border: 2px solid var(--line); border-radius: 20px; padding: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.modal-head h3 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; margin: 0; }
.xbtn { background: rgba(255,255,255,.08); border: 0; border-radius: 10px; width: 40px; height: 40px; font-size: 1.2rem; }
.ltabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 10px; scrollbar-width: thin; }
.ltabs button { flex: none; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.05); border: 2px solid var(--line); border-radius: 999px; padding: 7px 14px; font-weight: 700; white-space: nowrap; }
.ltabs button.on { border-color: var(--lime); background: rgba(164,213,150,.12); }
.flag { border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.4); flex: none; }
.picker { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; align-content: start; }
.tcard { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 10px 6px; display: grid; justify-items: center; gap: 6px; text-align: center; position: relative; }
.tcard:hover { border-color: var(--sky); }
.tcard.on { border-color: var(--lime); background: #3d6a73; }
.tcard.taken { opacity: .35; pointer-events: none; }
.tcard .tn { font-weight: 700; font-size: .82rem; line-height: 1.15; }
.tcard .ovr { position: absolute; top: 6px; right: 8px; font-family: var(--display); font-size: .85rem; color: var(--lime); }
.pcol { display: grid; gap: 10px; align-content: start; }
.pcard { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: center; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 10px; text-align: left; }
.pcard.on { border-color: var(--lime); }
.pcard img { width: 76px; height: 76px; }
.pcard .pn { font-family: var(--display); font-size: 1.2rem; }
.pcard .stats { margin: 4px 0 0; max-width: none; }
.empty { color: var(--muted); text-align: center; padding: 40px 10px; border: 2px dashed var(--line); border-radius: 14px; }

/* ---------- game ---------- */
#scr-game { background: #132629; }
#scr-game.active { display: flex; align-items: center; justify-content: center; }
.game-wrap { position: relative; width: min(100vw, calc((100vh - 0px) * 25 / 11)); margin: 0 auto; aspect-ratio: 25/11; max-height: 100vh; }
#cv { width: 100%; height: 100%; display: block; background: #1a3236; }
.hud { position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 10px; padding: 1.2% 1.6%; pointer-events: none; z-index: 2; }
.hud-side { display: flex; align-items: center; gap: 10px; background: rgba(20,40,44,.82); border: 2px solid rgba(255,255,255,.12); border-radius: 14px; padding: 6px 12px; min-width: 0; }
.hud-side.r { flex-direction: row-reverse; text-align: right; }
.hud-side img { width: clamp(28px, 4vw, 46px); height: clamp(28px, 4vw, 46px); }
.hud-side .badge { width: clamp(22px, 3vw, 36px); height: auto; flex: none; }
.hud-side .who { min-width: 0; flex: 1; }
.hud-side .who b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(.8rem, 1.6vw, 1.15rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-side .who small { color: var(--muted); font-size: clamp(.6rem, 1.1vw, .8rem); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbar { height: 8px; background: rgba(255,255,255,.12); border-radius: 99px; overflow: hidden; margin-top: 4px; }
.pbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb14d, #ff4d1a); border-radius: 99px; transition: width .1s; }
.pbar.full i { background: linear-gradient(90deg, #fff27a, #ffb000); animation: pulse .5s infinite alternate; }
.pbar.armed i { background: #ff3b1a; }
@keyframes pulse { to { filter: brightness(1.5); } }
.hud-mid { text-align: center; background: rgba(20,40,44,.9); border: 2px solid rgba(255,255,255,.14); border-radius: 14px; padding: 4px 18px 6px; }
.hud-score { font-family: var(--display); font-size: clamp(1.4rem, 3.6vw, 2.6rem); line-height: 1; letter-spacing: 2px; }
.hud-time { font-family: var(--display); color: var(--lime); font-size: clamp(.8rem, 1.6vw, 1.15rem); }
.hud-time.ot { color: var(--orange); }
.pause-btn { position: absolute; right: 1.2%; bottom: 2%; z-index: 3; background: rgba(20,40,44,.8); border: 2px solid rgba(255,255,255,.2); border-radius: 10px; width: 44px; height: 40px; font-weight: 800; }
.hud-hint { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); z-index: 2; color: rgba(255,255,255,.7); font-size: .8rem; background: rgba(0,0,0,.35); border-radius: 99px; padding: 4px 12px; pointer-events: none; white-space: nowrap; }
.hud-hint:empty { display: none; }
.touch { display: none; position: absolute; inset: auto 0 0 0; justify-content: space-between; padding: 12px; z-index: 3; pointer-events: none; }
.touch .tgroup { display: flex; gap: 10px; align-items: flex-end; pointer-events: auto; }
.touch button { width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); background: rgba(20,40,44,.55); font-size: 1.4rem; font-weight: 800; touch-action: none; user-select: none; -webkit-user-select: none; }
.touch button.kick { width: 84px; height: 84px; background: rgba(164,213,150,.75); color: #1d3439; font-family: var(--display); font-size: 1rem; }
.touch button.sm { width: 50px; height: 50px; font-size: 1.1rem; }
.touch button.on { filter: brightness(1.6); transform: scale(.94); }
body.is-touch .touch { display: flex; }
body.is-touch .hud-hint { display: none; }
.overlay { position: absolute; inset: 0; z-index: 10; background: rgba(10,22,24,.72); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; }
.ov-box { background: var(--bg2); border: 2px solid var(--line); border-radius: 20px; padding: 24px; width: min(520px, 100%); text-align: center; display: grid; gap: 10px; }
.ov-box h2 { font-family: var(--display); font-weight: 400; font-size: 2.2rem; margin: 0; }
.final-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 6px 0 8px; }
.final-score .side { display: grid; justify-items: center; gap: 4px; font-weight: 700; font-size: .9rem; }
.final-score .side img { width: 72px; height: 72px; }
.final-score .num { font-family: var(--display); font-size: 3.2rem; }
.result-tag { font-family: var(--display); font-size: 1.3rem; }
.result-tag.win { color: var(--lime); } .result-tag.lose { color: var(--red); } .result-tag.draw { color: var(--gold); }

/* ---------- hub ---------- */
.hub { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; max-width: 1200px; margin: 0 auto; padding: 18px 16px 40px; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tabs button { background: rgba(255,255,255,.05); border: 2px solid var(--line); border-radius: 10px; padding: 7px 14px; font-weight: 700; }
.tabs button.on { background: var(--sky); color: #1d3439; border-color: var(--sky); }
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th { color: var(--muted); font-weight: 700; font-size: .75rem; text-transform: uppercase; text-align: center; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.tbl td { text-align: center; padding: 7px 4px; border-bottom: 1px solid rgba(72,124,134,.5); }
.tbl td.team { text-align: left; }
.tbl tr.me td { background: rgba(164,213,150,.08); }
.tbl tr.q td:first-child { box-shadow: inset 3px 0 0 var(--lime); }
.tm { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tm .badge { width: 24px; height: auto; flex: none; }
.tm span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm .tag { font-size: .7rem; padding: 1px 6px; border-radius: 6px; background: var(--orange); color: #fff; font-weight: 800; flex: none; }
.tm .tag.bot { background: rgba(255,255,255,.12); color: var(--muted); }
.form { display: inline-flex; gap: 2px; }
.form i { width: 14px; height: 14px; border-radius: 3px; font-style: normal; font-size: .6rem; font-weight: 800; display: grid; place-items: center; }
.form .V { background: #a4d596; } .form .E { background: #8a8fa8; } .form .D { background: #e46247; }
.fixtures { display: grid; gap: 8px; }
.fix { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; font-size: .88rem; }
.fix.next { border-color: var(--lime); box-shadow: 0 0 0 2px rgba(164,213,150,.2); }
.fix .tm:last-child { flex-direction: row-reverse; text-align: right; }
.fix .sc { font-family: var(--display); font-size: 1.15rem; min-width: 58px; text-align: center; }
.fix .sc small { display: block; font-family: "Poppins"; font-size: .65rem; color: var(--muted); }
.fix.mine .sc { color: var(--lime); }
.hub-actions { display: grid; gap: 8px; margin-top: 14px; }
.bracket { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 8px; }
.bcol { display: grid; gap: 10px; align-content: space-around; min-width: 210px; }
.bcol h4 { margin: 0; font-family: var(--display); font-weight: 400; color: var(--muted); }
.bm { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.bm .row { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 8px; font-size: .85rem; }
.bm .row + .row { border-top: 1px solid var(--line); }
.bm .row.w { background: rgba(164,213,150,.1); font-weight: 700; }
.champ { text-align: center; padding: 14px; display: grid; gap: 8px; justify-items: center; }
.champ .trophy { font-size: 4rem; animation: bob 2s ease-in-out infinite; }
.champ h2 { font-family: var(--display); font-weight: 400; margin: 0; font-size: 2rem; color: var(--gold); }

/* ---------- career ---------- */
.career { max-width: 1200px; margin: 0 auto; padding: 18px 16px 40px; display: grid; gap: 16px; }
.career-top { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.career-top img.big { width: 120px; height: 120px; }
.career-top h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 2rem; }
.kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.kpi { background: rgba(255,255,255,.06); border-radius: 10px; padding: 6px 12px; font-size: .85rem; }
.kpi b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: var(--lime); margin-right: 4px; }
.career-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.next-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; text-align: center; margin: 6px 0 12px; }
.next-match img { width: 84px; height: 84px; }
.next-match .vs { font-family: var(--display); font-size: 1.8rem; color: var(--orange); }
.up-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; margin-bottom: 8px; }
.up-row .bar { height: 10px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; position: relative; }
.up-row .bar i { position: absolute; inset: 0 auto 0 0; background: var(--sky); }
.up-row .bar u { position: absolute; inset: 0 auto 0 0; background: var(--lime); text-decoration: none; }
.trophies { display: flex; gap: 8px; flex-wrap: wrap; }
.trophies span { background: rgba(245,175,108,.12); border: 1px solid rgba(245,175,108,.4); border-radius: 10px; padding: 6px 10px; font-size: .85rem; }
.league-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }

/* ---------- online / lobby ---------- */
.online-wrap { max-width: 860px; margin: 0 auto; padding: 22px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.online-wrap > p { grid-column: 1 / -1; }
.online-card { display: grid; gap: 10px; align-content: start; }
.online-card p { margin: 0; }
.code-input { width: 100%; text-align: center; font-family: var(--display); font-size: 2.4rem; letter-spacing: 12px; text-transform: uppercase; background: #1c353a; border: 2px solid var(--line); border-radius: 14px; color: var(--lime); padding: 10px; }
.code-input:focus { outline: none; border-color: var(--lime); }
.code-big { font-family: var(--display); font-size: 1.6rem; letter-spacing: 6px; background: var(--lime); color: #1d3439; border: 0; border-radius: 12px; padding: 6px 14px; box-shadow: 0 4px 0 var(--lime-d); }
.lobby { display: grid; grid-template-columns: 1fr 1fr 0.9fr; gap: 16px; max-width: 1240px; margin: 0 auto; padding: 18px 16px 40px; align-items: start; }
.members { display: grid; gap: 8px; margin-bottom: 12px; }
.member { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.member img { width: 56px; height: 56px; }
.member .nm { font-weight: 800; }
.member .tn { color: var(--muted); font-size: .85rem; display: flex; gap: 6px; align-items: center; }
.member .noimg { width: 56px; height: 56px; border-radius: 50%; border: 2px dashed var(--line); display: grid; place-items: center; color: var(--muted); }
.crown { font-size: .75rem; background: var(--gold); color: #3a2a00; border-radius: 6px; padding: 1px 6px; font-weight: 800; }
.chat-log { height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; background: rgba(0,0,0,.2); border-radius: 12px; padding: 10px; margin-bottom: 10px; }
.chat-log .sys { color: var(--muted); font-style: italic; font-size: .82rem; }
.chat-log b { color: var(--sky); }
#chat-form { display: flex; gap: 8px; }
#chat-form input { flex: 1; min-width: 0; background: #1c353a; border: 2px solid var(--line); color: var(--text); border-radius: 10px; padding: 8px 10px; }

/* ---------- help ---------- */
.help { max-width: 900px; margin: 0 auto; padding: 22px 16px 40px; display: grid; gap: 16px; }
.keys, .tips { margin: 0; padding-left: 18px; display: grid; gap: 8px; line-height: 1.6; }
kbd { display: inline-block; min-width: 26px; text-align: center; background: #f3f1df; color: #111; border-radius: 6px; padding: 1px 7px; font-family: "Poppins"; font-weight: 700; font-size: .85rem; box-shadow: 0 3px 0 #8aa9a3; margin: 0 2px; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(30px); opacity: 0; background: #fff; color: #142a2e; font-weight: 700; border-radius: 12px; padding: 10px 18px; z-index: 99; transition: .25s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .menu-grid { grid-template-columns: 1fr; }
  .brand-logo { width: 84px; height: 84px; }
  .hub, .career-grid, .lobby, .online-wrap, .picker { grid-template-columns: 1fr; }
  .vs-row { grid-template-columns: 1fr; }
  .vs-row.single { grid-template-columns: 1fr; }
  .career-top { grid-template-columns: auto 1fr; }
  .career-top > :last-child { grid-column: 1 / -1; }
  .hud-side .who small { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .game-wrap { width: min(100vw, calc(100vh * 25 / 11)); }
}

/* ---------- 2.0 ---------- */
.net-st { font-size: .8rem; font-weight: 800; border-radius: 99px; padding: 3px 10px; }
.net-st.on { color: #1d3439; background: var(--lime); }
.net-st.off { color: #fff; background: var(--red); animation: pulse .6s infinite alternate; }
@keyframes pulse { to { filter: brightness(1.4); } }
.brand-name .ver { font-style: normal; font-size: .38em; vertical-align: super; margin-left: 6px; background: var(--orange); color: #fff; border-radius: 8px; padding: 2px 8px; letter-spacing: 1px; }
img.badge.logo { object-fit: contain; flex: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.tm img.badge { width: 24px; height: 24px; }
.hud-side img.badge { width: clamp(24px, 3.2vw, 40px); height: clamp(24px, 3.2vw, 40px); }
.gk-tag { font-family: "Poppins"; font-size: .65rem; font-weight: 800; background: var(--sky); color: #1d3439; border-radius: 5px; padding: 1px 5px; vertical-align: middle; }
.fix { position: relative; }
.fix.is-live { border-color: var(--orange); }
.fix .sc small.live { color: var(--orange); font-weight: 800; }
.fix .watch { position: absolute; right: -6px; top: -10px; padding: 2px 6px; font-size: .8rem; }
.ready-box { background: rgba(164,213,150,.08); border: 2px solid var(--lime); border-radius: 14px; padding: 12px; display: grid; gap: 8px; text-align: center; }
.ready-box .rb-title { font-family: var(--display); font-size: 1.3rem; }
.ready-box .rb-time { color: var(--lime); }
.vote-box p { margin: 0; }
.vote-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vote-status { display: grid; gap: 6px; text-align: left; }
.vote-status div { display: flex; justify-content: space-between; background: rgba(255,255,255,.05); border-radius: 10px; padding: 8px 12px; }
.vote-status span { color: var(--lime); font-weight: 700; }

/* ---------- 3.0 ---------- */
.ball-ic { width: 20px; height: 20px; vertical-align: middle; margin-right: 4px; }
.seg.balls { flex-wrap: wrap; }
.seg.balls button { flex: 0 0 auto; padding: 6px 10px; }
.vote-bar { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); z-index: 6; width: min(720px, 94%); background: rgba(20,40,44,.92); border: 2px solid var(--gold); border-radius: 16px; padding: 10px 14px; display: grid; gap: 8px; text-align: center; }
.vote-bar.hidden { display: none; }
.vb-title { font-family: var(--display); font-size: 1.25rem; }
.vb-title span { display: block; font-family: "Poppins"; font-size: .75rem; color: var(--muted); }
.vb-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vb-btns .btn.chosen { outline: 3px solid var(--gold); filter: brightness(1.15); }
.vb-status { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: .85rem; }
.vb-status .vb-time { color: var(--gold); font-weight: 800; }
/* ---------- 4.0: conta, moedas, loja, estatísticas, cookies ---------- */
.menu-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.acct-chip { background: rgba(245,175,108,.14); border-color: rgba(245,175,108,.5); }
.acct-chip span { color: var(--muted); font-weight: 500; }
.acct-tag { font-size: .8rem; }
.account { max-width: 760px; margin: 0 auto; padding: 18px 16px 40px; }
.acc-card { display: grid; gap: 12px; }
.acc-form { display: grid; gap: 10px; }
.acc-form label { display: grid; gap: 4px; font-weight: 700; font-size: .9rem; }
.acc-form input[type=email], .acc-form input[type=password], .acc-form input[type=number], .acc-form input:not([type]) { background: #1c353a; border: 2px solid var(--line); color: var(--text); border-radius: 10px; padding: 10px 12px; font-size: 1rem; }
.acc-form input:focus { outline: none; border-color: var(--lime); }
.acc-form label.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; font-size: .85rem; }
.acc-form label.check input { margin-top: 3px; }
.acc-form a, .legal-links a, .menu-foot a, .cookie-bar a { color: var(--sky); }
.linkbtn { background: none; border: 0; color: var(--sky); text-decoration: underline; cursor: pointer; font-size: .9rem; padding: 4px; }
.ok-msg { color: var(--lime); } .err-msg { color: #f0a08f; }
.acc-head { display: flex; gap: 16px; align-items: center; }
.acc-coins { background: rgba(245,175,108,.12); border: 2px solid rgba(245,175,108,.5); border-radius: 16px; padding: 10px 16px; text-align: center; font-size: 1.4rem; }
.acc-coins b { font-family: var(--display); font-weight: 400; font-size: 1.8rem; color: var(--gold); }
.acc-coins small { display: block; font-size: .7rem; color: var(--muted); }
.acc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acc-actions .xl { grid-column: span 1; }
.panel.inner { background: rgba(0,0,0,.18); }
.panel.inner h4 { margin: 0 0 6px; }
.coins-tbl td, .coins-tbl th { padding: 4px; }
.coins-line { background: rgba(245,175,108,.1); border: 1px solid rgba(245,175,108,.45); border-radius: 12px; padding: 8px 10px; font-size: .9rem; }
.coins-line .linkbtn { font-size: .85rem; }
.ledger { display: grid; gap: 4px; font-size: .88rem; }
.ledger div { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(72,124,134,.5); padding: 3px 0; }
.ledger .pos { color: var(--lime); } .ledger .neg { color: #f0a08f; }
.res { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font-size: .7rem; font-weight: 800; }
.res.V { background: #a4d596; } .res.E { background: #8a8fa8; } .res.D { background: #e46247; }
.tbl.hist td small { font-size: .75rem; }
.shop { max-width: 1180px; margin: 0 auto; padding: 22px 16px 40px; display: grid; gap: 18px; }
/* 4.1 — Jogadores Lendários */
.btn.gold { background: linear-gradient(180deg, #ffe680, #e8b923); color: #2b1c00; box-shadow: 0 5px 0 #9c6a00; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.mbtn.gold { border-color: #e8b923; background: linear-gradient(180deg, rgba(245,175,108,.18), rgba(245,175,108,.04)); }
.mbtn.gold small { color: #f5af6c; }
.shop-hero { text-align: center; }
.shop-hero h2 { font-family: var(--display); font-weight: 400; margin: 0 0 6px; font-size: 2.2rem; color: #f5af6c; text-shadow: 0 3px 0 #6b4800; }
.shop-hero p { max-width: 760px; margin: 0 auto 6px; }
.warn-line { background: rgba(245,175,108,.12); border: 1px solid rgba(245,175,108,.5); border-radius: 12px; padding: 10px 14px; display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.legend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.legend-card { position: relative; background: linear-gradient(180deg, #2a2410 0%, var(--panel) 38%); border: 2px solid #8a6a1c; border-radius: 18px; padding: 14px; display: grid; gap: 6px; justify-items: center; text-align: center; overflow: hidden; }
.legend-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--k1), var(--k2)); }
.legend-card.own { border-color: #f5af6c; box-shadow: 0 0 0 2px rgba(245,175,108,.25), 0 0 24px rgba(245,175,108,.18); }
.lg-tier { font-family: var(--display); font-size: .9rem; letter-spacing: 1px; text-transform: uppercase; }
.lg-ovr { position: absolute; top: 12px; right: 14px; font-family: var(--display); font-size: 1.5rem; color: #f5af6c; }
.lg-head { width: 128px; height: 128px; }
.lg-name { font-family: var(--display); font-size: 1.3rem; }
.lg-real { color: var(--muted); font-size: .85rem; margin-top: -4px; }
.lg-meta { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); flex-wrap: wrap; justify-content: center; }
.lg-desc { font-size: .84rem; color: #dfe7d8; margin: 2px 0; min-height: 3.6em; }
.legend-card .stats { width: 100%; margin: 2px 0; }
.lg-buy { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; margin-top: 4px; }
.lg-price { font-family: var(--display); font-size: 1.25rem; color: #f5af6c; }
.lg-owned { font-family: var(--display); color: var(--lime); font-size: 1.1rem; }
.shop-card.soon { padding: 18px; }
.shop-card.soon h3 { margin: 0; }
.buy-box { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; }
.buy-box img { width: 120px; height: 120px; }
.ltabs .leg-tab { border-color: #e8b923; color: #f5af6c; }
.ltabs .leg-tab.on { background: rgba(245,175,108,.16); border-color: #f5af6c; }
.ltabs .leg-tab small { color: var(--muted); font-weight: 500; }
.tcard.legend { border-color: #8a6a1c; background: linear-gradient(180deg, #2a2410, var(--panel)); }
.tcard.legend.on { border-color: #f5af6c; }
.tcard.legend .ovr { color: #f5af6c; }
.tcard.legend .lhead { width: 64px; height: 64px; }
.tcard.locked .lhead { filter: grayscale(.85) brightness(.7); }
.tcard .lock { font-size: .75rem; color: #f5af6c; font-weight: 700; }
.pcard.legend { border-color: #f5af6c; }
.shop-card { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 30px 20px; }
.shop-card h2 { font-family: var(--display); font-weight: 400; margin: 0; font-size: 2rem; }
.shop-ic { font-size: 4rem; animation: bob 2s ease-in-out infinite; }
.shop-soon { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.shop-soon span { background: rgba(255,255,255,.06); border: 1px dashed var(--line); border-radius: 10px; padding: 6px 12px; font-size: .9rem; opacity: .75; }
.cookie-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; background: #fff; color: #142a2e; border-radius: 14px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between; box-shadow: 0 8px 30px rgba(0,0,0,.4); font-size: .88rem; max-width: 980px; margin: 0 auto; }
.cookie-bar a { color: #487c86; }
@media (max-width: 860px) { .acc-actions { grid-template-columns: 1fr; } .acc-head { flex-direction: column; align-items: flex-start; } .cookie-bar { flex-direction: column; align-items: stretch; } }

/* =====================================================================
   4.3 — REPLAYS (estante, prévia, linha do tempo com os gols)
   ===================================================================== */
.rp { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 16px; }
.rp-list { display: grid; gap: 8px; align-content: start; max-height: 72vh; overflow-y: auto; padding-right: 4px; }
.rp-item { display: grid; gap: 2px; text-align: left; background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.rp-item b { font-family: var(--display); font-weight: 400; font-size: 1.1rem; }
.rp-item small { color: var(--muted); }
.rp-item.on { border-color: var(--lime); background: #3d6a73; }
.rp-main { display: grid; gap: 12px; align-content: start; min-width: 0; }
.rp-screen { position: relative; border-radius: 14px; overflow: hidden; border: 2px solid var(--line); background: #000; }
.rp-screen canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.rp-tag { position: absolute; bottom: 12%; right: 12px; background: rgba(14,30,33,.8); border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: .85rem; }
.rp-tag:empty { display: none; }
.rp-tl { position: relative; height: 56px; margin: 4px 14px 0; }
.rp-tl.small { height: 40px; margin: 6px 14px 2px; }
.rp-track { position: absolute; left: 0; right: 0; top: 14px; height: 10px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.rp-track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sky), var(--lime)); }
.rp-pin { position: absolute; top: 0; transform: translateX(-50%); background: none; border: 0; padding: 0; display: grid; justify-items: center; gap: 2px; cursor: pointer; }
.rp-pin span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; background: var(--c1); box-shadow: 0 0 0 3px var(--c2), 0 4px 10px rgba(0,0,0,.4); transition: transform .12s; }
.rp-pin em { font-style: normal; font-size: .72rem; font-weight: 800; color: var(--text); background: rgba(14,30,33,.9); border-radius: 6px; padding: 0 5px; opacity: 0; transition: opacity .12s; position: relative; z-index: 2; }
.rp-pin:hover em, .rp-pin.on em { opacity: 1; }
.rp-pin:hover, .rp-pin.on { z-index: 3; }
.rp-pin:hover span, .rp-pin.on span { transform: scale(1.18); box-shadow: 0 0 0 3px var(--lime), 0 0 18px rgba(164,213,150,.5); }
.rp-tl.small .rp-pin span { width: 24px; height: 24px; font-size: .7rem; }
.rp-track { top: 9px; }
.rp-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 8px; max-height: 260px; overflow-y: auto; }
.rp-goal .btn { white-space: nowrap; }
.rp-goal b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-goal { display: grid; grid-template-columns: 46px 1fr auto auto; gap: 8px; align-items: center; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px; }
.rp-goal img { width: 46px; height: 46px; }
.rp-goal b { display: block; font-family: var(--display); font-weight: 400; }
.rp-goal small { color: var(--muted); }
.rp-goal.on { border-color: var(--lime); background: rgba(164,213,150,.07); }
.rp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rp-prog { display: grid; gap: 6px; }
.rp-prog > div { height: 12px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.rp-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--orange), var(--gold)); transition: width .2s; }
.rp-prog span { font-weight: 700; font-size: .9rem; }
.ov-replay { background: rgba(0,0,0,.2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px 4px; text-align: left; }
.ovr-head { font-weight: 800; font-size: .9rem; }
.ov-box { width: min(560px, 100%); }
.sn-links small { color: var(--muted); font-weight: 500; }
.hub-rp { float: right; margin-left: 8px; }
@media (max-width: 860px) { .rp { grid-template-columns: 1fr; } .rp-list { max-height: 180px; } .rp-actions { grid-template-columns: 1fr; } .rp-goal { grid-template-columns: 40px 1fr; } .rp-goal .btn { grid-column: span 1; } }
/* =====================================================================
   4.4 — Loja (abas, chuteiras, bolas), Dev, Treino, torneio e celular
   ===================================================================== */
.shop-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.shop-tabs button { background: rgba(255,255,255,.05); border: 2px solid var(--line); border-radius: 999px; padding: 10px 20px; font-family: var(--display); font-size: 1.15rem; }
.shop-tabs button.on { border-color: #f5af6c; background: rgba(245,175,108,.14); color: #f5af6c; }
#shop-note:empty { display: none; }
.item-card .item-img { width: 200px; height: 120px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.item-card .item-img.ball { width: 110px; height: 110px; }
.item-card.equipped { border-color: var(--lime); box-shadow: 0 0 0 2px rgba(164,213,150,.25), 0 0 24px rgba(164,213,150,.15); }
.boost-tag { background: rgba(164,213,150,.12); border: 1px solid rgba(164,213,150,.5); color: var(--lime); border-radius: 10px; padding: 4px 10px; font-weight: 800; font-size: .82rem; }
.ltabs .dev-tab { border-color: #e4e1a1; color: #f6f4e0; }
.ltabs .dev-tab.on { background: rgba(228,225,161,.16); border-color: #fff; }
.tcard.dev { border-color: #e4e1a1; background: linear-gradient(180deg, #2f525a, var(--panel)); }
.tcard.dev.on { border-color: #fff; box-shadow: 0 0 18px rgba(255,255,255,.25); }
.tcard.dev .lhead { width: 64px; height: 64px; }
.tcard.dev .ovr { color: #fff; }
.pcard.dev { border-color: #fff; }
.tcard.picked { box-shadow: 0 0 0 3px rgba(164,213,150,.35); }
.tcard.picked .ovr { color: var(--lime); font-size: 1rem; }
.tour-bots-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tour-bots-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tour-bots-chips span { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; font-size: .8rem; font-weight: 700; }
.tour-bots-chips .badge { width: 18px; height: 18px; }

/* ---------- celular: sem zoom no toque duplo, sem seleção de texto no jogo ---------- */
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
#scr-game, #scr-game * { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#scr-game .overlay, #scr-game .overlay * { touch-action: manipulation; }
.touch { padding: 12px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
/* no Netlify aparece o selo "Powered by Netlify" no canto: os botões de toque sobem para não ficar embaixo dele */
body.on-netlify .touch .tgroup:last-child { margin-bottom: 52px; }
body.on-netlify .pause-btn { bottom: calc(2% + 52px); }
body.on-netlify .toast { bottom: 76px; }
@media (max-width: 860px) {
  body.on-netlify .shop, body.on-netlify .home, body.on-netlify .setup, body.on-netlify .help, body.on-netlify .career, body.on-netlify .account { padding-bottom: 80px; }
  .shop-tabs button { padding: 8px 14px; font-size: 1rem; }
}.dev-original { width: 100%; max-width: 360px; border-radius: 14px; border: 2px solid #e4e1a1; justify-self: center; }
.rp-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .rp-actions { grid-template-columns: 1fr; } }
.dev-badge { display: block; width: 100%; text-align: center; background: rgba(228,225,161,.12); border: 1px solid #e4e1a1; color: #f6f4e0; border-radius: 10px; padding: 8px 10px; font-weight: 800; margin-top: 6px; }

/* ---------- jogo (HUD) ---------- */
#scr-game { background: #132629; }
.hud-side, .hud-mid { background: rgba(29,52,57,.86); border: 2px solid rgba(228,225,161,.16); }
.hud-score { color: var(--c-cream-l); }
.hud-time { color: var(--c-green); }
.hud-midcol { display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.hud-emo { position: relative; pointer-events: auto; }
.emo-btn { position: relative; width: clamp(34px, 3.6vw, 46px); height: clamp(34px, 3.6vw, 46px); border-radius: 50%; border: 2px solid rgba(228,225,161,.35); background: rgba(29,52,57,.86); font-size: clamp(1rem, 1.8vw, 1.4rem); line-height: 1; overflow: hidden; }
.emo-btn.cd::after { content: attr(data-s); position: absolute; inset: 0; display: grid; place-items: center; background: rgba(21,42,46,.72); color: var(--c-cream); font-family: var(--display); font-size: .9rem; }
.emo-pop { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); display: flex; gap: 4px; background: rgba(29,52,57,.95); border: 2px solid rgba(228,225,161,.3); border-radius: 999px; padding: 5px 8px; z-index: 4; }
.emo-pop button { width: clamp(32px, 3.2vw, 42px); height: clamp(32px, 3.2vw, 42px); border: 0; border-radius: 50%; background: transparent; font-size: clamp(1rem, 1.7vw, 1.35rem); transition: transform .1s, background .1s; }
.emo-pop button:hover { background: rgba(228,225,161,.14); transform: scale(1.15); }
.hud-endtrain { pointer-events: auto; font-size: .8rem; padding: 6px 12px; }
.pause-btn { background: rgba(29,52,57,.86); border-color: rgba(228,225,161,.3); color: var(--c-cream); }
.touch button.kick { background: rgba(164,213,150,.8); color: var(--c-teal-d); }
.ov-box { background: var(--bg2); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ov-box h2 { color: var(--c-cream); }
.result-tag.win { color: var(--c-green); } .result-tag.lose { color: var(--c-red); } .result-tag.draw { color: var(--c-orange); }
.add-friend { justify-self: center; background: rgba(164,213,150,.14); box-shadow: inset 0 0 0 2px rgba(164,213,150,.5); color: var(--c-green); }
.fr-tag { font-size: 1rem; }

/* ---------- online / lobby ---------- */
.online-wrap { max-width: 1100px; grid-template-columns: repeat(3, 1fr); }
.online-friends { border-color: rgba(164,213,150,.35); }
.code-input { background: var(--c-teal-d); color: var(--c-cream); border-color: var(--line); }
.code-big { background: var(--c-cream); color: var(--c-teal-d); box-shadow: 0 4px 0 #b9b67a; }
.member { grid-template-columns: 60px 1fr auto; background: rgba(228,225,161,.04); }
.member img { width: 60px; height: 60px; }
.member .m-acts { display: flex; gap: 4px; align-items: center; }
.lobby-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.crown { background: var(--c-orange); color: #2f1d0c; }
.chat-log b { color: var(--c-cream); }

/* ---------- páginas novas: missões, amigos, ajustes ---------- */
.page5 { max-width: 1100px; margin: 0 auto; padding: 22px 16px 40px; display: grid; gap: 16px; }
.empty-panel { text-align: center; display: grid; gap: 10px; justify-items: center; }
.ms-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ms-head h3 b { color: var(--c-orange); }
.ms-head p { margin: 4px 0 0; }
.ms-lv { display: flex; gap: 6px; }
.ms-lv i { width: 26px; height: 10px; border-radius: 99px; background: rgba(228,225,161,.14); }
.ms-lv i.on { background: linear-gradient(90deg, var(--c-green), var(--c-cream)); }
.ms-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ms-cols h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mission { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; background: rgba(228,225,161,.05); border: 1px solid var(--line); border-radius: 16px; padding: 12px; margin-bottom: 10px; }
.mission.done { border-color: var(--c-green); background: rgba(164,213,150,.1); }
.mission.claimed { opacity: .6; }
.ms-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; background: var(--c-cream); }
.ms-main b { font-family: var(--display); font-weight: 400; font-size: 1.05rem; letter-spacing: .4px; }
.ms-bar { height: 8px; border-radius: 99px; background: rgba(228,225,161,.12); overflow: hidden; margin: 6px 0 2px; }
.ms-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-green), var(--c-cream)); border-radius: 99px; }
.ms-main small { color: var(--muted); }
.ms-rw { display: grid; justify-items: end; gap: 4px; }
.ms-rw span { font-family: var(--display); color: var(--c-orange); font-size: 1.1rem; }
.ms-rw em { font-style: normal; font-size: .75rem; color: var(--muted); }
.fr-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; align-items: start; }
.fr-form { display: flex; gap: 8px; margin-bottom: 10px; }
.fr-form input { flex: 1; min-width: 0; background: var(--c-teal-d); border: 2px solid var(--line); color: var(--text); border-radius: 12px; padding: 10px 12px; font-size: 1rem; }
.fr-form input:focus { outline: none; border-color: var(--c-green); }
.fr-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(228,225,161,.04); border: 1px solid var(--line); margin-bottom: 8px; flex-wrap: wrap; }
.fr-row.online { border-color: rgba(164,213,150,.45); }
.fr-row .spacer { flex: 1; }
.fr-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(228,225,161,.25); flex: none; }
.fr-dot.on { background: var(--c-green); box-shadow: 0 0 0 4px rgba(164,213,150,.2); }
.fcode { color: var(--c-cream); font-weight: 700; letter-spacing: 1px; }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.set-keys { grid-column: 1 / -1; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.set-row:last-of-type { border-bottom: 0; }
.set-row b { display: block; }
.set-row small { color: var(--muted); display: block; margin-top: 2px; }
.switch { flex: none; width: 56px; height: 32px; border-radius: 99px; border: 0; background: rgba(228,225,161,.2); position: relative; transition: background .15s; }
.switch i { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--c-cream-l); transition: left .15s; }
.switch.on { background: var(--c-green); }
.switch.on i { left: 28px; }
.adapt-note { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: center; background: rgba(228,225,161,.05); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; font-size: .85rem; }
.adapt-note span { font-weight: 800; color: var(--c-cream); }
.adapt-note i { display: flex; gap: 3px; }
.adapt-note i b { width: 16px; height: 8px; border-radius: 99px; background: rgba(228,225,161,.16); }
.adapt-note i b.on { background: var(--c-orange); }
.adapt-note.up { border-color: rgba(245,175,108,.5); }
.adapt-note small { color: var(--muted); }


/* =====================================================================
   6.0 — IDENTIDADE FINAL (Manual da Marca 6.0)
   Paleta 60·30·10:
     Preto Aveludado  #121212  · 60%  fundos
     Cinza Chumbo     #242424 / #2A2A2A · 30%  modais, barra lateral, cartões
     Dourado Fosco    #C5A059  · 10%  botões principais, bordas de lendas, moeda
     Branco Gelo      #F5F5F5  · textos
   Tipografia: Heavitas (logo, títulos de tela e alertas grandes) · Poppins (todo o resto)
   ===================================================================== */
@font-face { font-family: "Heavitas"; src: url("../assets/fonts/heavitas.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root {
  --black: #121212; --black-2: #181818; --black-3: #0d0d0d;
  --char: #242424; --char-2: #2A2A2A; --char-3: #333333;
  --gold: #C5A059; --gold-l: #E3C98A; --gold-d: #8F7340; --gold-soft: rgba(197,160,89,.14);
  --ice: #F5F5F5; --ice-2: #BDBDBD; --ice-3: #8C8C8C;
  --red6: #C9503B; --green6: #6FBF73; --blue6: #5B8DEF;
  --card: #0b0f19;
  --c-teal: var(--black); --c-teal-d: var(--black-3); --c-teal-dd: #000; --c-teal-l: var(--char); --c-teal-ll: var(--char-2);
  --c-green: var(--gold); --c-green-d: var(--gold-d); --c-cream: var(--ice); --c-cream-l: #fff; --c-orange: var(--gold); --c-orange-d: var(--gold-d); --c-red: var(--red6); --c-red-d: #8d3426;
  --bg: var(--black); --bg2: var(--char); --panel: var(--char); --panel2: var(--char-2); --line: #363636;
  --text: var(--ice); --muted: var(--ice-2); --lime: var(--gold); --lime-d: var(--gold-d); --orange: var(--gold); --orange-d: var(--gold-d);
  --sky: var(--gold-l); --red: var(--red6);
  --radius: 14px; --r-sm: 8px;
  --display: "Heavitas", "Poppins", system-ui, sans-serif;
  --body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 14px 34px rgba(0,0,0,.42);
  --head-h: 68px; --side-w: 0px; --side-full: 236px; --side-mini: 72px;
  --metal-gold: linear-gradient(135deg, #7d6230 0%, #f1dc9f 22%, #b08a40 42%, #fff1c2 55%, #a47f37 74%, #f0d590 100%);
  --metal-silver: linear-gradient(135deg, #6f757d 0%, #eef1f4 22%, #9aa1a9 42%, #ffffff 55%, #8b9199 74%, #dfe3e8 100%);
  --metal-bronze: linear-gradient(135deg, #6a3f1e 0%, #e7b07d 22%, #9c5f33 42%, #f6cfa6 55%, #8e532a 74%, #d99a64 100%);
}
html { background: var(--black); }
body { background: var(--black); color: var(--ice); font-family: var(--body); font-weight: 400; letter-spacing: 0; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(1200px 520px at 50% -12%, rgba(197,160,89,.07), transparent 65%); }
#app { position: relative; z-index: 1; }
::selection { background: var(--gold); color: var(--black); }
a { color: var(--gold-l); }
h1, h2, h3, h4 { letter-spacing: .2px; }
b, strong { font-weight: 600; }
.muted { color: var(--ice-2); }
code { background: rgba(255,255,255,.06); color: var(--gold-l); }
/* títulos de tela e cartões: Heavitas */
.topbar h2, .h-title, .ov-title, .ov-box h2, .pk-title, .lm-name, .shop-hero h2, .modal-head h3, .champ h2 { font-family: var(--display); font-weight: 400; letter-spacing: .5px; text-transform: uppercase; }
.panel h3, .card-head h3 { font-family: var(--body); font-weight: 600; font-size: 1.02rem; letter-spacing: .3px; color: var(--ice); margin: 0 0 12px; text-transform: none; }
.panel h4 { font-weight: 600; color: var(--ice); }

/* ---------- botões ---------- */
.btn { font-family: var(--body); font-weight: 600; font-size: .98rem; letter-spacing: .2px; border-radius: var(--r-sm); padding: 11px 18px;
  background: var(--char); color: var(--ice); border: 1px solid rgba(197,160,89,.28); box-shadow: none; transition: background .15s, border-color .15s, transform .08s, filter .15s; }
.btn:hover { background: var(--char-2); border-color: rgba(197,160,89,.6); filter: none; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn.sec, .btn.ghost { background: var(--char); color: var(--ice); border: 1px solid rgba(197,160,89,.3); box-shadow: none; }
/* principal: dourado sólido, texto preto em Heavitas, sem degradê */
.btn.gold, .btn.lime, .btn.orange { background: var(--gold); color: var(--black); border: 1px solid var(--gold); font-family: var(--display); font-weight: 400; letter-spacing: .6px; text-transform: uppercase; box-shadow: none; }
.btn.gold:hover, .btn.lime:hover, .btn.orange:hover { background: #d1ae6b; border-color: #d1ae6b; }
.btn.red { background: transparent; color: #f0a596; border: 1px solid rgba(201,80,59,.6); box-shadow: none; }
.btn.red:hover { background: rgba(201,80,59,.14); }
.btn:disabled, .btn.gold:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.btn.xl { font-size: 1.05rem; padding: 15px 18px; margin-top: 10px; }
.btn.gold.xl, .btn.lime.xl, .btn.orange.xl { font-size: 1.12rem; }
.btn.sm { padding: 7px 12px; font-size: .86rem; }
.btn.gold.sm, .btn.lime.sm { font-size: .82rem; }
.linkbtn { color: var(--gold-l); font-family: var(--body); }
.back { background: var(--char); border: 1px solid #3a3a3a; color: var(--ice); border-radius: var(--r-sm); font-weight: 600; }
.back:hover { border-color: var(--gold); }
.xbtn { background: var(--char-2); color: var(--ice); border-radius: var(--r-sm); }
.pill { background: var(--char); border: 1px solid #3a3a3a; color: var(--ice); font-weight: 600; }
.pill.gold { background: var(--gold-soft); border-color: rgba(197,160,89,.5); color: var(--gold-l); font-size: .75rem; padding: 3px 10px; }
kbd { background: var(--char-2); color: var(--ice); box-shadow: 0 2px 0 #000; border: 1px solid #3c3c3c; font-family: var(--body); }

/* ---------- moeda e preço ---------- */
.coin { display: inline-block; width: 1.05em; height: 1.05em; border-radius: 50%; vertical-align: -.17em; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff3c9 0 12%, #e3c27a 30%, #c5a059 58%, #8f7340 100%);
  box-shadow: inset 0 0 0 .1em rgba(255,240,200,.45), inset 0 0 0 .19em #a4823f, 0 1px 2px rgba(0,0,0,.5); }
.price { display: inline-flex; align-items: center; gap: 6px; color: var(--ice); }
.price b { font-family: var(--body); font-weight: 700; font-size: 1rem; letter-spacing: .2px; }
.price-pill { display: inline-flex; align-items: center; gap: 6px; }
.owned-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--gold-soft); color: var(--gold-l); border: 1px solid rgba(197,160,89,.45); border-radius: 999px; padding: 3px 10px; font-size: .74rem; font-weight: 600; font-style: normal; letter-spacing: .3px; }

/* ---------- topo (logo central) ---------- */
.app-head { position: sticky; top: 0; z-index: 30; height: var(--head-h); display: flex; align-items: center; justify-content: center; background: rgba(18,18,18,.94); border-bottom: 1px solid #262626; backdrop-filter: blur(8px); }
.ah-logo { background: none; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; height: 100%; }
.ah-logo img { height: 40px; width: auto; display: block; }
.kebab { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: var(--r-sm); background: transparent; border: 1px solid transparent; display: grid; place-content: center; gap: 4px; }
.kebab i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--ice); transition: transform .25s, background .2s; }
.kebab:hover { border-color: #3a3a3a; background: var(--char); }
.kebab:hover i { background: var(--gold); }
body.sn-mini .kebab i:nth-child(1) { transform: translateY(1px); } body.sn-mini .kebab i:nth-child(3) { transform: translateY(-1px); }
.ah-right { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; gap: 8px; }
.acct-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--char); border: 1px solid #3a3a3a; border-radius: 999px; padding: 7px 14px; color: var(--ice); font-weight: 600; font-size: .88rem; max-width: 44vw; }
.acct-chip:hover { border-color: var(--gold); }
.acct-chip .ac-name { color: var(--ice-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-scr="scr-game"] .app-head { display: none; }

/* ---------- barra lateral recolhível ---------- */
.side-nav { position: fixed; top: var(--head-h); bottom: 0; left: 0; width: var(--side-full); z-index: 25; display: flex; flex-direction: column; gap: 2px; padding: 12px 0; background: var(--char); border-right: 1px solid #2f2f2f; overflow-y: auto; overflow-x: hidden; transform: translateX(-100%); transition: transform .28s ease, width .28s ease; }
.sn-links { display: flex; flex-direction: column; gap: 1px; }
.sn-links button { display: flex; align-items: center; gap: 14px; width: 100%; background: none; border: 0; border-left: 4px solid transparent; padding: 11px 18px 11px 20px; color: var(--ice-2); font-family: var(--body); font-weight: 500; font-size: .93rem; text-align: left; white-space: nowrap; letter-spacing: 0; box-shadow: none; transition: color .15s, border-color .15s; }
.sn-links button svg { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sn-links button:hover { color: var(--ice); background: rgba(255,255,255,.025); }
.sn-links button.on { background: none; border-left-color: var(--gold); color: var(--ice); font-weight: 600; box-shadow: none; }
.sn-links button.on svg { color: var(--gold); }
.sn-links button span { overflow: hidden; text-overflow: ellipsis; transition: opacity .2s; }
.sn-sep { height: 1px; background: #333; margin: 8px 18px; }
.sn-acct { margin: auto 12px 4px; display: flex; align-items: center; gap: 10px; text-align: left; background: var(--black-2); border: 1px solid #333; border-radius: var(--radius); padding: 10px; color: var(--ice); }
.sn-acct:hover { border-color: var(--gold); }
.sn-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: var(--char-2); border: 1px solid #3a3a3a; font-size: .95rem; }
.sn-ic.lv { font-family: var(--display); color: var(--black); background: var(--gold); border-color: var(--gold); }
.sn-txt { display: grid; min-width: 0; line-height: 1.25; }
.sn-txt b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-txt small { color: var(--ice-2); font-size: .76rem; display: flex; gap: 5px; align-items: center; white-space: nowrap; }
.sn-scrim { display: none; }
.fr-badge:empty { display: none; }
.fr-badge { font-family: var(--body); font-size: .62rem; font-weight: 700; background: var(--gold-soft); color: var(--gold-l); border-radius: 99px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.fr-badge.alert { background: var(--red6); color: #fff; }
.sn-links small[data-replays-count]:empty { display: none; }
.sn-links small { color: var(--ice-3); font-weight: 500; }
@media (min-width: 1100px) {
  :root { --side-w: var(--side-full); }
  body.sn-mini { --side-w: var(--side-mini); }
  body.sn-gone { --side-w: 0px; }
  .side-nav { transform: none; width: var(--side-w); }
  body.sn-gone .side-nav { transform: translateX(-100%); width: var(--side-full); }
  body.sn-mini .sn-links button { padding-left: 22px; }
  body.sn-mini .sn-links button span, body.sn-mini .sn-txt, body.sn-mini .sn-links small { opacity: 0; pointer-events: none; }
  body.sn-mini .sn-sep { margin: 8px 14px; }
  body.sn-mini .sn-acct { margin: auto 10px 4px; padding: 8px; justify-content: center; }
  #app { padding-left: var(--side-w); transition: padding-left .28s ease; }
  body[data-scr="scr-game"] .side-nav, body[data-scr="scr-lobby"] .side-nav, body[data-scr="scr-hub"] .side-nav { display: none; }
  body[data-scr="scr-game"] #app, body[data-scr="scr-lobby"] #app, body[data-scr="scr-hub"] #app { padding-left: 0; }
  .cookie-bar { left: calc(var(--side-w) + 12px); }
}
@media (max-width: 1099.98px) {
  body.sn-open .side-nav { transform: none; box-shadow: 20px 0 60px rgba(0,0,0,.6); }
  body.sn-open .sn-scrim { display: block; position: fixed; inset: var(--head-h) 0 0 0; z-index: 24; background: rgba(0,0,0,.55); }
}

/* ---------- barra de título das telas ---------- */
.topbar { background: transparent; border-bottom: 1px solid #262626; position: static; backdrop-filter: none; padding: 16px var(--gut, 20px); }
.topbar h2 { color: var(--ice); font-size: clamp(1.15rem, 2.3vw, 1.55rem); }

/* ---------- painéis ---------- */
.panel { background: var(--char); border: 1px solid #303030; border-radius: var(--radius); box-shadow: none; padding: 18px; }
.panel.inner { background: var(--black-2); }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-head h3 { margin: 0; flex: 1; }
.warn-line { background: var(--gold-soft); border: 1px solid rgba(197,160,89,.45); color: var(--ice); }
.empty { border: 1px dashed #3a3a3a; color: var(--ice-2); }
.gbar { height: 6px; border-radius: 99px; background: #333; overflow: hidden; }
.gbar i { display: block; height: 100%; border-radius: 99px; background: var(--gold); transition: width .4s ease; }
.gbar.big { height: 9px; margin: 10px 0; }
.gold-t { color: var(--gold); }

/* ---------- MENU INICIAL ---------- */
.home6 { max-width: 1080px; margin: 0 auto; padding: 26px 20px 30px; display: grid; gap: 20px; }
.h6-status { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; min-height: 36px; }
.hs-chip { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid #333; border-radius: 999px; padding: 6px 14px; color: var(--ice-2); font-size: .86rem; font-weight: 500; }
.hs-chip b { color: var(--ice); font-weight: 600; }
.hs-chip:hover { border-color: rgba(197,160,89,.6); color: var(--ice); }
.hs-chip.lv span { color: var(--ice-3); font-size: .74rem; text-transform: uppercase; letter-spacing: 1px; }
.hs-chip.lv b { font-family: var(--display); font-weight: 400; color: var(--gold); }
.hs-xp { display: inline-block; width: 54px; height: 4px; border-radius: 9px; background: #333; overflow: hidden; }
.hs-xp i { display: block; height: 100%; background: var(--gold); }
.hs-chip.dev { color: var(--black); background: var(--ice); border-color: var(--ice); font-weight: 700; font-size: .72rem; letter-spacing: 1px; }
.h6-play { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.play6 { position: relative; overflow: hidden; display: grid; gap: 6px; justify-items: center; align-content: center; min-height: 150px; padding: 24px 18px; border-radius: var(--radius); background: var(--gold); color: var(--black); border: 1px solid var(--gold); transition: transform .12s, background .15s; text-align: center; }
.play6 b { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 3.6vw, 2.5rem); letter-spacing: 1px; text-transform: uppercase; line-height: 1; }
.play6 small { font-weight: 500; font-size: .86rem; opacity: .8; }
.play6::after { content: ""; position: absolute; inset: auto -30% -70% auto; width: 80%; aspect-ratio: 1; border-radius: 50%; border: 22px solid rgba(18,18,18,.07); }
.play6:hover { background: #cfac69; transform: translateY(-2px); }
.play6:active { transform: translateY(1px); }
.h6-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; align-items: stretch; }
.hm-sub { font-size: .7rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ice-3); margin: 10px 0 6px; }
.hm-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; }
.hm-row + .hm-row { border-top: 1px solid #2f2f2f; }
.hm-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--black-2); font-size: .95rem; }
.hm-main { display: grid; gap: 5px; min-width: 0; }
.hm-main span { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-rw { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: .85rem; }
.hm-row.done .hm-rw { color: var(--gold-l); }
.hm-row.claimed { opacity: .5; }
.h6-feature { display: grid; grid-template-rows: 1fr auto; overflow: hidden; position: relative; background: linear-gradient(160deg, #2a2a2a, #1d1d1d); border-color: rgba(197,160,89,.35); }
.hf-stage { transition: opacity .38s ease, transform .38s ease; }
.hf-stage.out { opacity: 0; transform: translateX(-10px); }
.hf-slide { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; min-height: 210px; }
.hf-kicker { display: inline-block; font-size: .7rem; text-transform: uppercase; letter-spacing: 1.6px; color: var(--gold); font-weight: 600; margin-bottom: 4px; }
.hf-txt h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.2rem, 2.4vw, 1.7rem); margin: 0 0 4px; text-transform: uppercase; letter-spacing: .4px; }
.hf-txt .stats { margin: 10px 0 8px; max-width: 260px; }
.hf-price { display: flex; align-items: center; gap: 6px; }
.hf-price b { font-weight: 700; }
.hf-img { width: clamp(130px, 18vw, 200px); height: auto; filter: drop-shadow(0 0 22px rgba(197,160,89,.35)); }
.hf-faces { display: flex; }
.hf-faces img { width: 74px; height: 74px; margin-left: -18px; border-radius: 50%; background: #1b1b1b; border: 2px solid var(--gold); }
.hf-faces.locked img { filter: grayscale(1) brightness(.6); border-color: #444; }
.hf-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.hf-dots { display: flex; gap: 6px; }
.hf-dots i { width: 18px; height: 4px; border-radius: 9px; background: #444; cursor: pointer; }
.hf-dots i.on { background: var(--gold); }
.menu-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--ice-3); margin-top: 6px; padding-top: 14px; border-top: 1px solid #262626; }
.menu-foot a { color: var(--ice-2); }

/* ---------- som (mudo e volumes) ---------- */
.audio-ctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mute-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--char); border: 1px solid #3a3a3a; font-size: 1rem; display: grid; place-items: center; }
.mute-btn:hover { border-color: var(--gold); }
.mute-btn.muted { border-color: rgba(201,80,59,.7); }
.vol-row { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--ice-2); }
input[type=range] { accent-color: var(--gold); width: 120px; }
.ov-box .audio-ctl { justify-content: center; border-top: 1px solid #333; padding-top: 12px; margin-top: 4px; }
.ov-box .vol-row input { width: 90px; }
.set-row.col { flex-direction: column; align-items: stretch; }

/* ---------- configuração da partida ---------- */
.setup { max-width: 980px; }
.pick-card { background: var(--char); border: 1px solid #333; box-shadow: none; border-radius: var(--radius); }
.pick-card .stripe { height: 3px; }
.pick-card .role { font-family: var(--body); font-weight: 600; color: var(--gold); font-size: .74rem; letter-spacing: 2px; }
.pick-card .pname { font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: var(--ice); text-transform: uppercase; letter-spacing: .4px; }
.pick-card .tname { color: var(--ice-2); font-weight: 500; }
.pick-card .gear { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ice-2); margin: -4px 0 10px; font-weight: 500; }
.pick-card .gear img { width: 34px; height: auto; }
.pick-card .gear b { color: var(--gold-l); font-weight: 600; }
.vs-badge { font-family: var(--display); color: var(--gold); text-shadow: none; font-size: 1.8rem; }
.stat { color: var(--ice-2); }
.stat .bar { background: #333; height: 6px; }
.stat .bar i { background: var(--gold); }
.opt > label { font-family: var(--body); color: var(--ice-2); opacity: 1; font-weight: 600; font-size: .74rem; letter-spacing: 1.2px; }
.seg button { background: var(--char); border: 1px solid #3a3a3a; color: var(--ice-2); border-radius: var(--r-sm); font-weight: 600; font-size: .88rem; }
.seg button:hover { color: var(--ice); border-color: #555; }
.seg button.on { background: var(--gold-soft); color: var(--ice); border-color: var(--gold); }
.adapt-note { background: var(--black-2); border: 1px solid #333; }
.adapt-note i b.on { background: var(--gold); }
/* dropdown próprio */
.dd { position: relative; }
.dd-cur { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--char); border: 1px solid #3a3a3a; border-radius: var(--r-sm); padding: 9px 12px; color: var(--ice); font-weight: 500; font-size: .92rem; text-align: left; transition: border-color .15s; }
.dd-cur span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-cur img, .dd-list img { width: 34px; height: 24px; object-fit: contain; flex: none; border-radius: 4px; }
.dd-ic { width: 28px; height: 24px; display: grid; place-items: center; font-style: normal; flex: none; }
.dd-car { color: var(--gold); font-size: .8rem; transition: transform .2s; }
.dd.open .dd-cur, .dd-cur:hover { border-color: var(--gold); }
.dd.open .dd-car { transform: rotate(180deg); }
.dd-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; margin: 0; padding: 6px; list-style: none; background: var(--char); border: 1px solid var(--gold); border-radius: var(--r-sm); box-shadow: var(--shadow); max-height: 300px; overflow-y: auto; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .16s, transform .16s; }
.dd.open .dd-list { opacity: 1; transform: none; pointer-events: auto; }
.dd-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: .9rem; color: var(--ice-2); }
.dd-list li:hover { background: var(--char-2); color: var(--ice); }
.dd-list li.on { color: var(--ice); background: var(--gold-soft); box-shadow: inset 3px 0 0 var(--gold); }
.dd.locked .dd-cur { opacity: .7; cursor: default; }
.dd.locked .dd-car { display: none; }

/* ---------- escolha de jogador ---------- */
.modal { background: rgba(0,0,0,.72); }
.modal-box { background: var(--char); border: 1px solid #3a3a3a; border-radius: 16px; box-shadow: var(--shadow); }
.modal-head h3 { color: var(--ice); font-size: 1.15rem; }
.ltabs button { background: var(--black-2); border: 1px solid #333; border-radius: 6px; color: var(--ice-2); font-weight: 600; font-size: .86rem; }
.ltabs button.on { background: var(--gold-soft); border-color: var(--gold); color: var(--ice); }
.ltabs .leg-tab { color: var(--gold-l); border-color: rgba(197,160,89,.45); }
.ltabs .leg-tab small { color: var(--ice-3); }
.ltabs .dev-tab { color: var(--ice); border-color: #777; }
.tcard { background: var(--black-2); border: 1px solid #333; border-radius: 10px; }
.tcard:hover { border-color: #666; }
.tcard.on { border-color: var(--gold); background: #1f1b12; }
.tcard .tn { font-weight: 600; }
.tcard .ovr { font-family: var(--display); color: var(--gold); }
.tcard.legend { border-color: rgba(197,160,89,.45); background: linear-gradient(180deg, #221d12, #161616); }
.tcard.special { border-color: color-mix(in srgb, var(--rc, #888) 55%, #333); background: linear-gradient(180deg, #171a24, #141414); }
.tcard.r-C { --rc: #7FB77E; } .tcard.r-R { --rc: #5B8DEF; } .tcard.r-E { --rc: #A06CD5; } .tcard.r-L { --rc: #C5A059; }
.tcard .lock { color: var(--gold-l); }
.pcard { background: var(--black-2); border: 1px solid #333; border-radius: 10px; }
.pcard.on { border-color: var(--gold); box-shadow: none; }
.pcard .pn { font-family: var(--body); font-weight: 600; font-size: 1rem; }
.pcard.legend, .pcard.special { border-color: var(--gold); }
.pk-title { font-size: 1.1rem; }
.gk-tag { font-family: var(--body); background: var(--ice); color: var(--black); font-weight: 700; }

/* ---------- partida (HUD e alertas) ---------- */
#scr-game { background: #000; }
#cv { background: #0f0f0f; }
.hud-side, .hud-mid { background: rgba(18,18,18,.86); border: 1px solid rgba(197,160,89,.28); border-radius: 12px; }
.hud-side .who b { font-family: var(--body); font-weight: 600; }
.hud-score { font-family: var(--display); color: var(--ice); letter-spacing: 3px; }
.hud-time { font-family: var(--body); font-weight: 600; color: var(--gold); letter-spacing: 1px; }
.hud-time.ot { color: #ffd77a; }
.emo-btn { border: 1px solid rgba(197,160,89,.45); background: rgba(18,18,18,.86); overflow: visible; }
.emo-btn kbd { position: absolute; right: -8px; bottom: -6px; font-size: .55rem; min-width: 0; padding: 0 4px; margin: 0; line-height: 1.4; box-shadow: none; background: var(--gold); color: var(--black); border: 0; }
.emo-btn.cd::after { border-radius: 50%; background: rgba(18,18,18,.78); color: var(--gold); font-family: var(--body); font-weight: 700; }
.emo-pop { background: rgba(18,18,18,.95); border: 1px solid rgba(197,160,89,.45); }
.emo-pop button { position: relative; }
.emo-pop button small { position: absolute; right: -1px; bottom: -3px; font-size: .55rem; font-weight: 700; color: var(--gold); }
.emo-pop button:hover { background: var(--gold-soft); }
.pause-btn { background: rgba(18,18,18,.86); border: 1px solid rgba(197,160,89,.4); color: var(--ice); border-radius: 10px; }
.touch button { background: rgba(18,18,18,.55); border-color: rgba(245,245,245,.35); }
.touch button.kick { background: rgba(197,160,89,.85); color: var(--black); font-family: var(--display); }
.overlay { background: rgba(0,0,0,.66); }
.ov-box { background: var(--char); border: 1px solid #3a3a3a; border-radius: 16px; }
.ov-box h2, .ov-title { color: var(--ice); font-size: 1.7rem; }
.final-score .num { font-family: var(--display); color: var(--ice); }
.result-tag { font-family: var(--display); letter-spacing: 1px; }
.result-tag.win { color: var(--gold); } .result-tag.lose { color: #e07a66; } .result-tag.draw { color: var(--ice-2); }
.coins-line { background: var(--gold-soft); border: 1px solid rgba(197,160,89,.4); }
.vote-bar { background: rgba(18,18,18,.94); border: 1px solid var(--gold); }
.vb-title { font-family: var(--display); }
.ov-replay { background: var(--black-2); border-color: #333; }
.add-friend { background: var(--char-2); box-shadow: none; border: 1px solid var(--gold); color: var(--gold-l); }

/* ---------- competição ---------- */
.tabs button { background: var(--char); border: 1px solid #3a3a3a; border-radius: 6px; color: var(--ice-2); font-weight: 600; }
.tabs button.on { background: var(--gold); color: var(--black); border-color: var(--gold); font-family: var(--display); font-weight: 400; letter-spacing: .5px; }
.tbl th { color: var(--ice-3); border-bottom-color: #333; }
.tbl td { border-bottom-color: #2c2c2c; }
.tbl tr.me td { background: var(--gold-soft); }
.tbl tr.q td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.form .V { background: var(--gold); color: var(--black); } .form .E { background: #6c6c6c; } .form .D { background: #8d3426; color: #fff; }
.fix { background: var(--black-2); border-color: #303030; }
.fix.next { border-color: var(--gold); box-shadow: none; }
.fix .sc { font-family: var(--display); }
.fix .sc small { font-family: var(--body); }
.fix.mine .sc { color: var(--gold); }
.bm { background: var(--black-2); border-color: #333; }
.bm .row.w { background: var(--gold-soft); }
.champ h2 { color: var(--gold); }
.ready-box { background: var(--gold-soft); border: 1px solid var(--gold); }
.ready-box .rb-title { font-family: var(--display); }
.tm .tag { background: var(--gold); color: var(--black); }

/* ---------- online / sala ---------- */
.online-wrap { max-width: 1100px; grid-template-columns: repeat(3, 1fr); }
.code-input { background: var(--black); color: var(--gold); border: 1px solid #3a3a3a; font-family: var(--display); }
.code-input:focus { border-color: var(--gold); }
.code-big { background: var(--gold); color: var(--black); box-shadow: none; border-radius: var(--r-sm); font-family: var(--display); }
.member { background: var(--black-2); border-color: #303030; }
.member .nm { font-weight: 600; }
.crown { background: var(--gold); color: var(--black); }
.chat-log { background: var(--black-2); }
.chat-log b { color: var(--gold-l); }
#chat-form input, .fr-form input, .acc-form input[type=email], .acc-form input[type=password], .acc-form input[type=number], .acc-form input:not([type]) { background: var(--black); border: 1px solid #3a3a3a; color: var(--ice); border-radius: var(--r-sm); }
#chat-form input:focus, .fr-form input:focus, .acc-form input:focus { border-color: var(--gold); outline: none; }
.net-st.on { background: var(--gold); color: var(--black); }
.net-st.off { background: var(--red6); }
.toast { background: var(--char); color: var(--ice); border: 1px solid var(--gold); box-shadow: var(--shadow); font-weight: 500; }
.cookie-bar { background: var(--char); color: var(--ice); border: 1px solid #3a3a3a; }
.cookie-bar a { color: var(--gold-l); }

/* ---------- LOJA ---------- */
.shop { max-width: 1260px; gap: 18px; }
.shop-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.shop-tabs button { background: var(--char); border: 1px solid #3a3a3a; border-radius: 6px; padding: 10px 20px; color: var(--ice-2); font-family: var(--display); font-size: .92rem; letter-spacing: .6px; text-transform: uppercase; transition: border-color .15s, color .15s, background .15s; }
.shop-tabs button:hover { color: var(--ice); border-color: #555; }
.shop-tabs button.on { background: var(--gold); color: var(--black); border-color: var(--gold); }
.shop-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; border-bottom: 1px solid #262626; padding-bottom: 14px; }
.shop-hero h2 { color: var(--ice); text-shadow: none; font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: 0 0 4px; }
.shop-hero p { margin: 0; max-width: 760px; font-size: .92rem; }
.sh-count { text-align: right; flex: none; }
.sh-count b { display: block; font-family: var(--display); font-weight: 400; font-size: 2rem; color: var(--gold); line-height: 1; }
.sh-count span { font-size: .78rem; color: var(--ice-3); }
.shop-grid { display: grid; gap: 16px; }
.shop-grid.cards { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.shop-grid.items { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.shop-grid.wide { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
/* carta estilo Ultimate Team */
.ut-card { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; padding: 14px 12px 12px; color: var(--ice); text-align: center; border: 2px solid transparent; border-radius: 18px 18px 22px 22px;
  background: linear-gradient(180deg, #151b2a 0%, var(--card) 55%, #080b12 100%) padding-box, var(--metal-gold) border-box; transition: transform .15s, box-shadow .2s; overflow: hidden; }
.ut-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.08), transparent 60%); pointer-events: none; }
.ut-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(197,160,89,.25); }
.ut-card.metal-silver { background: linear-gradient(180deg, #171b24 0%, var(--card) 55%, #080b12 100%) padding-box, var(--metal-silver) border-box; }
.ut-card.metal-bronze { background: linear-gradient(180deg, #1c1813 0%, var(--card) 55%, #0a0806 100%) padding-box, var(--metal-bronze) border-box; }
.ut-card.supreme { background: linear-gradient(180deg, #2a2210 0%, #12100a 55%, #080705 100%) padding-box, var(--metal-gold) border-box; box-shadow: 0 0 0 1px rgba(233,196,106,.25), 0 0 26px rgba(233,196,106,.16); }
.ut-card.supreme::after { content: ""; position: absolute; inset: -40% -60%; background: linear-gradient(105deg, transparent 42%, rgba(255,240,200,.18) 50%, transparent 58%); animation: sheen 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes sheen { 0%, 55% { transform: translateX(-40%); } 100% { transform: translateX(40%); } }
.ut-card.special { background: linear-gradient(180deg, #161a26 0%, var(--card) 55%, #070a10 100%) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--rc) 60%, #000), color-mix(in srgb, var(--rc) 85%, #fff) 35%, color-mix(in srgb, var(--rc) 70%, #000) 70%, var(--rc)) border-box; }
.ut-ovr { position: absolute; top: 12px; left: 14px; font-family: var(--display); font-size: 1.55rem; line-height: 1; color: var(--gold-l); }
.metal-silver .ut-ovr { color: #e6eaee; } .metal-bronze .ut-ovr { color: #e8b383; } .special .ut-ovr { color: color-mix(in srgb, var(--rc) 70%, #fff); }
.ut-pos { position: absolute; top: 40px; left: 15px; font-size: .62rem; font-weight: 700; letter-spacing: 1px; color: var(--ice-2); }
.nflag { position: absolute; top: 58px; left: 15px; width: 20px; height: 13px; border-radius: 2px; background: linear-gradient(90deg, var(--n1) 0 50%, var(--n2) 50% 100%); box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.lm-info .nflag { position: static; display: inline-block; vertical-align: -1px; }
.ut-tier { font-size: .58rem; text-transform: uppercase; letter-spacing: 1.4px; color: var(--ice-3); font-weight: 600; margin: 0 0 0 26px; align-self: start; justify-self: end; }
.ut-img { width: 74%; aspect-ratio: 1; height: auto; margin: 4px 0 2px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)); }
.ut-card.own .ut-img { filter: drop-shadow(0 0 16px rgba(197,160,89,.35)) drop-shadow(0 8px 14px rgba(0,0,0,.55)); }
.ut-name { font-family: var(--display); font-size: .98rem; letter-spacing: .4px; text-transform: uppercase; line-height: 1.15; }
.ut-meta { font-size: .72rem; color: var(--ice-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ut-attrs { display: grid; gap: 4px; width: 100%; margin: 8px 0 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }
.ut-at { display: grid; grid-template-columns: 30px 1fr 18px; align-items: center; gap: 6px; font-size: .64rem; font-weight: 700; letter-spacing: .8px; color: var(--ice-2); }
.ut-at i { height: 4px; border-radius: 9px; background: rgba(255,255,255,.1); overflow: hidden; }
.ut-at i b { display: block; height: 100%; background: var(--gold); border-radius: 9px; }
.metal-silver .ut-at i b { background: #d5dadf; } .metal-bronze .ut-at i b { background: #d8975f; } .special .ut-at i b { background: var(--rc); }
.ut-at em { font-style: normal; color: var(--ice); text-align: right; }
.ut-foot { min-height: 24px; display: flex; align-items: center; }
/* cartões de item */
.item-card { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 14px 14px 12px; text-align: center; color: var(--ice); border-radius: 14px; border: 1px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, #3b3f47, #9aa0a8 30%, #3b3f47 55%, #7d828a 80%, #2f3238) border-box; transition: transform .15s, box-shadow .2s; min-width: 0; }
.item-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.5); }
.item-card.own { background: linear-gradient(var(--card), var(--card)) padding-box, var(--metal-gold) border-box; }
.ic-tag { justify-self: start; font-size: .62rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; padding: 3px 8px; border-radius: 99px; color: var(--ice-2); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.item-card[style*="--rc"] .ic-tag { color: color-mix(in srgb, var(--rc) 75%, #fff); border-color: color-mix(in srgb, var(--rc) 45%, transparent); }
.ic-tag.boost { color: var(--gold-l) !important; background: var(--gold-soft); border-color: rgba(197,160,89,.5) !important; }
.ic-img { width: 100%; max-width: 210px; height: 120px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.ic-img.ball { width: 104px; height: 104px; }
.ic-img.stad { max-width: none; height: auto; aspect-ratio: 25/11; object-fit: cover; border-radius: 10px; }
.ic-name { font-weight: 600; font-size: .95rem; }
.ic-sub { font-size: .76rem; color: var(--ice-3); line-height: 1.35; }
.ic-foot { margin-top: 4px; min-height: 24px; display: flex; align-items: center; }
/* modal de compra / história */
.lm-wrap { display: grid; grid-template-columns: 230px 1fr; gap: 22px; align-items: start; }
.lm-card .ut-card { width: 100%; pointer-events: none; }
.lm-info { display: grid; gap: 10px; align-content: start; }
.lm-name { margin: 0; font-size: clamp(1.3rem, 3vw, 2rem); color: var(--ice); }
.lm-story { font-size: 1rem; line-height: 1.65; color: var(--ice); margin: 0; border-left: 3px solid var(--gold); padding-left: 14px; }
.buy-box { grid-template-columns: 180px 1fr; gap: 18px; }
.buy-box img { width: 180px; height: 140px; object-fit: contain; }
.buy-box > div { display: grid; gap: 10px; align-content: start; }
.buy-box.wide img { width: 100%; height: auto; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- personalização ---------- */
.cu-grid { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.cu-preview { display: grid; justify-items: center; gap: 6px; text-align: center; position: sticky; top: calc(var(--head-h) + 12px); }
.cu-preview h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; margin: 0; font-size: 1.1rem; }
.cu-head { width: 220px; height: 220px; }
.cu-cur { display: flex; align-items: center; gap: 12px; background: var(--black-2); border: 1px solid #333; border-radius: 10px; padding: 8px 14px; text-align: left; width: 100%; }
.cu-cur img { width: 70px; height: auto; }
.cu-cur b { display: block; }
.cu-cur small { color: var(--gold-l); font-size: .78rem; }
.cu-lists .card-head { margin-top: 6px; }
.boot-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.boot-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--black-2); border: 1px solid #2f2f2f; cursor: pointer; transition: border-color .15s, background .15s; min-width: 0; }
.boot-list li:hover { border-color: #5a5a5a; }
.boot-list li.on { border-color: var(--gold); background: #1f1b12; }
.boot-list li img { width: 62px; height: 38px; object-fit: contain; flex: none; }
.boot-list li span { flex: 1; min-width: 0; font-size: .86rem; font-weight: 500; line-height: 1.25; }
.boot-list li span small { display: block; color: var(--gold-l); font-size: .72rem; }
.boot-list li em { font-style: normal; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--gold); }
.star { color: var(--gold); }

/* ---------- conta, estatísticas, missões, amigos, ajustes ---------- */
.acc-coins { background: var(--black-2); border: 1px solid rgba(197,160,89,.45); display: grid; justify-items: center; gap: 2px; font-size: 1.3rem; }
.acc-coins b { font-family: var(--display); color: var(--gold); }
.kpis { gap: 10px; }
.kpi { display: grid; gap: 2px; background: var(--black-2); border: 1px solid #2f2f2f; border-radius: 10px; padding: 10px 14px; min-width: 104px; }
.kpi b { font-family: var(--display); font-weight: 400; font-size: 1.45rem; color: var(--gold); margin: 0; line-height: 1.1; }
.kpi span { font-family: var(--body); color: var(--ice); font-size: .74rem; }
.ledger div { border-bottom-color: #2c2c2c; }
.ledger .pos { color: var(--gold-l); } .ledger .neg { color: #e07a66; }
.res.V { background: var(--gold); color: var(--black); } .res.E { background: #6c6c6c; } .res.D { background: #8d3426; color: #fff; }
.ms-head h3 b { color: var(--gold); }
.ms-lv i { background: #333; } .ms-lv i.on { background: var(--gold); }
.mission { background: var(--black-2); border-color: #2f2f2f; }
.mission.done { border-color: var(--gold); background: #1f1b12; }
.ms-ic { background: var(--char-2); }
.ms-main b { font-family: var(--body); font-weight: 600; font-size: .95rem; }
.ms-bar { background: #333; height: 6px; }
.ms-bar i { background: var(--gold); }
.ms-rw span { font-family: var(--body); color: var(--ice); }
.fr-row { background: var(--black-2); border-color: #2f2f2f; }
.fr-row.online { border-color: rgba(197,160,89,.45); }
.fr-dot.on { background: var(--gold); box-shadow: 0 0 0 4px rgba(197,160,89,.18); }
.fcode { color: var(--gold-l); }
.set-row { border-bottom-color: #2f2f2f; }
.switch { background: #3a3a3a; } .switch i { background: var(--ice); } .switch.on { background: var(--gold); }
.dev-badge { background: var(--char-2); border-color: var(--ice); color: var(--ice); }
.rp-item { background: var(--black-2); border-color: #333; } .rp-item.on { border-color: var(--gold); background: #1f1b12; }
.rp-item b, .rp-goal b { font-family: var(--body); font-weight: 600; }
.rp-track i, .rp-prog i { background: var(--gold); }
.rp-goal { background: var(--black-2); border-color: #303030; } .rp-goal.on { border-color: var(--gold); background: #1f1b12; }
.page5 { max-width: 1160px; }
.legal-links a, .acc-form a { color: var(--gold-l); }
.ok-msg { color: var(--gold-l); }

/* ---------- carregamento ---------- */
.boot-load { background: var(--black); }
.boot-load img { width: min(520px, 80vw); }
.boot-load .bl-bar { background: #2a2a2a; height: 4px; width: min(300px, 64vw); }
.boot-load .bl-bar i { background: var(--gold); }
.boot-load small { font-family: var(--body); color: var(--ice-2); letter-spacing: .5px; font-size: .82rem; }

/* ---------- acessibilidade ---------- */
body.bigtext { font-size: 112.5%; }
body.cb .result-tag.win, body.cb .ledger .pos, body.cb .ok-msg { color: #6fa8ff; }
body.cb .res.V, body.cb .form .V { background: #3d8bff; color: #fff; }
body.cb .seg button.on, body.cb .btn.gold { outline: 2px solid var(--ice); outline-offset: -2px; }
body.lowfx .ut-card.supreme::after { display: none; }

/* ---------- responsivo ---------- */
:root { --gut: clamp(14px, 2.2vw, 32px); }
.home6 > *, .h6-grid > *, .page5 > *, .shop > *, .setup > *, .cu-grid > * { min-width: 0; }
html, body { max-width: 100%; overflow-x: hidden; }
@media (max-width: 980px) {
  .h6-grid, .cu-grid, .ms-cols, .fr-grid, .set-grid { grid-template-columns: 1fr; }
  .online-wrap { grid-template-columns: 1fr; }
  .cu-preview { position: static; }
}
@media (max-width: 860px) {
  .hub, .career-grid, .lobby, .picker { grid-template-columns: 1fr; }
  .vs-row, .vs-row.single { grid-template-columns: 1fr; }
  .lm-wrap { grid-template-columns: 1fr; justify-items: center; }
  .lm-card { width: 210px; }
  .shop-hero { flex-direction: column; align-items: flex-start; }
  .sh-count { text-align: left; }
}
@media (max-width: 600px) {
  :root { --head-h: 58px; }
  .ah-logo img { height: 30px; }
  .acct-chip { padding: 6px 10px; font-size: .8rem; }
  .acct-chip .ac-name { display: none; }
  .kebab { left: 8px; } .ah-right { right: 8px; }
  .home6 { padding: 18px 16px 26px; gap: 16px; }
  .h6-play { grid-template-columns: 1fr; gap: 12px; }
  .play6 { min-height: 104px; }
  .hf-slide { grid-template-columns: 1fr; justify-items: start; }
  .hf-img { position: absolute; right: -10px; top: 6px; width: 120px; opacity: .9; }
  .hf-txt { position: relative; z-index: 1; max-width: 70%; }
  .hf-faces img { width: 56px; height: 56px; }
  .shop-grid.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .shop-grid.items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .shop-grid.wide { grid-template-columns: 1fr; }
  .ut-card { padding: 12px 8px 10px; }
  .ut-ovr { font-size: 1.2rem; left: 10px; top: 10px; }
  .ut-pos { top: 32px; left: 11px; } .nflag { top: 48px; left: 11px; width: 16px; height: 11px; }
  .ut-tier { display: none; }
  .ut-name { font-size: .82rem; }
  .shop-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; }
  .shop-tabs button { flex: none; padding: 9px 14px; font-size: .8rem; }
  .buy-box { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .boot-list { grid-template-columns: 1fr 1fr; }
  .boot-list li { flex-direction: column; text-align: center; gap: 4px; }
  .menu-foot { justify-content: center; text-align: center; }
  .row2 { grid-template-columns: 1fr; }
  .kpi { min-width: calc(50% - 5px); }
}

/* 6.0: escudo pequeno ao lado do nome do time na sala (não herda o tamanho da cabeça) */
.member .tn img.badge, .member .tn svg.badge { width: 18px; height: 18px; flex: none; }
.member > img { width: 60px; height: 60px; }
/* 6.0.1: botões de ícone na lista de gols do replay (ver / baixar) */
.ic-btn { width: 36px; height: 36px; padding: 0 !important; display: inline-grid; place-items: center; flex: none; }
.ic-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ic-btn[data-gv] svg { fill: currentColor; stroke: none; }
.rp-goals { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rp-goal { grid-template-columns: 46px minmax(0, 1fr) auto auto; }
.rp-goal > div { min-width: 0; }
.rp-goal b { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) { .rp-goal { grid-template-columns: 40px minmax(0, 1fr) auto auto; } }
/* 6.0.1: jogos da competição — nome do jogador não invade o placar */
.fix { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.fix .tm { min-width: 0; overflow: hidden; }
.fix .tm .tag { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.fix .tm > span:not(.tag) { flex: none; }
.fix .sc { padding: 0 4px; }

/* 6.0.2: cadastro direto */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 44px !important; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 6px; background: transparent; opacity: .55; font-size: 1rem; }
.pw-eye:hover, .pw-eye.on { opacity: 1; background: var(--char-2); }
.acc-form input::placeholder { color: #6b6b6b; }

/* ===================== 6.1 ===================== */
/* fim da partida: moedas, XP e barra do nível */
.prog-line { display: grid; gap: 8px; text-align: left; padding: 10px 12px; }
.pl-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-coins, .pl-xp { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pl-coins b, .pl-xp b { font-size: 1.05rem; font-weight: 700; color: var(--ice); }
.pl-xp { color: var(--gold-l); }
.pl-lv { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; }
.pl-badge { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--black); font-family: var(--display); font-size: 1.05rem; }
.pl-bar .gbar.big { margin: 0 0 4px; height: 10px; }
.pl-bar .gbar i { transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.pl-bar small { color: var(--ice-2); font-size: .76rem; }
.pl-up { background: var(--gold); color: var(--black); border-radius: 8px; padding: 6px 10px; font-weight: 600; text-align: center; animation: plUp .6s ease both; }
@keyframes plUp { from { transform: scale(.9); opacity: 0; } }
/* escolha do jogador: chuteira acima do botão Trocar */
.pick-card .gear { display: flex; width: max-content; max-width: 100%; margin: -2px auto 10px; justify-content: center; }
/* abas das ligas em duas linhas, sem barra de rolagem */
.ltabs { flex-wrap: wrap; overflow: visible; padding-bottom: 0; gap: 6px; }
.ltabs button { padding: 6px 10px; font-size: .8rem; gap: 6px; }
.ltabs button .flag { width: 18px; height: 12px; }
/* configuração da partida compacta (tudo à vista, sem rolar) */
.setup { padding-top: 14px; padding-bottom: 18px; }
.pick-card { padding: 12px 14px; }
.pick-card .head { width: 112px; height: 112px; margin: 2px auto; }
.pick-card .pname { font-size: 1.02rem; }
.pick-card .tname { margin: 2px 0 6px; }
.pick-card .stats { margin: 4px auto 8px; gap: 3px; }
.opts { gap: 10px 12px; margin-top: 12px; }
.opt { gap: 4px; }
.dd-cur { padding: 7px 10px; }
.seg button { padding: 7px 10px; }
.adapt-note { padding: 6px 10px; font-size: .78rem; }
@media (min-width: 600px) {
  .setup > .opts, #lobby-settings.opts { display: grid; grid-template-columns: 1fr 1fr; }
  .setup > .opts > :not(.opt), #lobby-settings > :not(.opt) { grid-column: 1 / -1; }
  .setup > .opts > .opt:has(.seg button:nth-child(3)), #lobby-settings > .opt:has(.seg button:nth-child(3)), .setup > .opts > .opt:has(.tour-bots-row) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .setup { max-width: 1280px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .95fr); gap: 14px 22px; align-items: start; }
  .setup > .vs-row { grid-column: 1; grid-row: 1 / span 2; }
  .setup > .opts { grid-column: 2; margin: 0; background: var(--char); border: 1px solid #303030; border-radius: var(--radius); padding: 14px; }
  .setup > .btn.xl { grid-column: 2; margin-top: 0; }
  .vs-row { gap: 10px; }
  .vs-badge { font-size: 1.4rem; }
}

.ltabs .tab-badge { width: 20px; height: 20px; object-fit: contain; }

/* 6.1: escolha do jogador mais compacta (5 craques + Confirmar sempre à vista) */
.pcol { gap: 6px; }
.pcard { grid-template-columns: 58px 1fr; padding: 6px 10px; gap: 8px; }
.pcard img { width: 58px; height: 58px; }
.pcard .pn { font-size: .92rem; }
.pcard .stats { gap: 1px; font-size: .72rem; margin: 2px 0 0; }
.pcard .stat .bar { height: 5px; }
.pcol #pk-ok, .pcol #pk-shop { position: sticky; bottom: -18px; margin-top: 4px; box-shadow: 0 -10px 18px var(--char); }
/* 6.1: celular — as duas cartas lado a lado, menos rolagem */
@media (max-width: 860px) {
  .setup > .vs-row, .setup > .vs-row.single { grid-template-columns: 1fr 1fr; gap: 8px; }
  .setup > .vs-row > .vs-badge { display: none; }
  .setup .pick-card { padding: 10px 8px; }
  .setup .pick-card .head { width: 84px; height: 84px; }
  .setup .pick-card .pname { font-size: .82rem; }
  .setup .pick-card .tname { font-size: .74rem; gap: 4px; }
  .setup .pick-card .stats { font-size: .66rem; }
  .setup .pick-card .stat { grid-template-columns: 54px 1fr 16px; gap: 4px; }
  .setup .pick-card .gear { font-size: .7rem; }
}@media (max-width: 599.98px) {
  .setup > .opts, #lobby-settings.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 8px; }
  .setup > .opts > :not(.opt), #lobby-settings > :not(.opt) { grid-column: 1 / -1; }
  .setup > .opts > .opt:has(.seg button:nth-child(3)), #lobby-settings > .opt:has(.seg button:nth-child(3)), .setup > .opts > .opt:has(.tour-bots-row) { grid-column: 1 / -1; }
  .setup .seg button { padding: 6px 4px; font-size: .78rem; }
  .setup .dd-cur { font-size: .82rem; padding: 6px 8px; }
  .setup .adapt-note small { display: none; }
}