:root {
  --bg: #07080c;
  --card: #12141c;
  --card2: #1a1d28;
  --line: #262a38;
  --text: #f2f4f8;
  --muted: #8b91a5;
  --blue: #2a6bff;
  --blue2: #5b8dff;
  --red: #ff2e45;
  --red2: #ff6474;
  --gold: #f5c518;
  --green: #22c55e;
  --third: #38a3ff;
  --gray: #4b5263;
  --radius: 16px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: 1.35;
  min-height: 100vh;
  background:
    radial-gradient(700px 300px at 0% 0%, rgba(42,107,255,.16), transparent 70%),
    radial-gradient(600px 300px at 100% 0%, rgba(255,46,69,.13), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blue2); }

#app { max-width: 640px; margin: 0 auto; padding: 0 14px calc(90px + env(safe-area-inset-bottom)); }

/* ---------- header ---------- */
.top { display: flex; align-items: center; gap: 12px; padding: 16px 0 10px; }
.top .title { flex: 1; min-width: 0; }
.top h1 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.top h1 b { color: var(--red); }
.top h1 em { color: var(--blue2); font-style: normal; }
.top .sub { color: var(--muted); font-size: 13px; }
.back { background: var(--card); border: 1px solid var(--line); border-radius: 12px; width: 42px; height: 42px; font-size: 20px; flex: none; }

/* ---------- nav ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: center;
  background: rgba(10,11,16,.94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav a {
  flex: 1; max-width: 160px; text-align: center; padding: 9px 0 10px;
  color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 600;
}
.nav a i { display: block; font-style: normal; font-size: 22px; margin-bottom: 1px; }
.nav a.on { color: var(--text); }
.nav a.on i { filter: drop-shadow(0 0 8px rgba(91,141,255,.7)); }

/* ---------- cards & layout ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 12px 0; }
.card h2 { margin: 0 0 10px; font-size: 15px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card h2 .r { margin-left: auto; text-transform: none; letter-spacing: 0; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.big { font-size: 22px; font-weight: 800; }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sep { height: 1px; background: var(--line); margin: 12px 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); background: var(--card2); border-radius: 14px;
  min-height: 48px; padding: 10px 16px; font-weight: 700; cursor: pointer; text-decoration: none; color: var(--text);
}
.btn:active { transform: scale(.97); }
.btn.block { width: 100%; }
.btn.blue { background: var(--blue); border-color: var(--blue); }
.btn.red { background: var(--red); border-color: var(--red); }
.btn.ghost { background: transparent; }
.btn.sm { min-height: 36px; padding: 6px 12px; border-radius: 10px; font-size: 14px; }
.btn.xl { min-height: 64px; font-size: 18px; border-radius: 18px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.gamebtn {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--card);
  font-size: 20px; font-weight: 800; color: var(--text); text-decoration: none; margin: 10px 0;
}
.gamebtn i { font-style: normal; font-size: 34px; }
.gamebtn small { display: block; font-size: 13px; color: var(--muted); font-weight: 500; }
.gamebtn.pp { background: linear-gradient(120deg, rgba(42,107,255,.25), var(--card) 60%); }
.gamebtn.tr { background: linear-gradient(120deg, rgba(255,46,69,.25), var(--card) 60%); }
.gamebtn.sm { background: linear-gradient(120deg, rgba(245,197,24,.18), var(--card) 60%); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); background: var(--card2); border-radius: 999px;
  padding: 9px 16px; font-weight: 700; cursor: pointer; min-height: 42px; color: var(--text);
}
.chip.on { background: var(--blue); border-color: var(--blue); }
.chip.onr { background: var(--red); border-color: var(--red); }

.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--card2); border: 1px solid var(--line); white-space: nowrap; }
.badge.copa { background: rgba(245,197,24,.15); border-color: rgba(245,197,24,.5); color: var(--gold); }
.badge.team { background: rgba(56,163,255,.15); border-color: rgba(56,163,255,.5); color: var(--third); }
.badge.amis { color: var(--muted); }
.badge.bad { background: rgba(255,46,69,.15); border-color: rgba(255,46,69,.5); color: var(--red2); }

/* ---------- forms ---------- */
.inp, select.inp, textarea.inp {
  width: 100%; background: var(--card2); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; min-height: 48px; outline: none;
}
.inp:focus { border-color: var(--blue); }
label.lbl { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 6px; font-weight: 600; }

/* ---------- avatar ---------- */
.av {
  position: relative; display: inline-flex; flex: none; width: var(--s); height: var(--s);
  border-radius: 50%; padding: max(2px, calc(var(--s) * .07)); background: var(--ring);
}
.av img, .av > span {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: flex;
  align-items: center; justify-content: center; background: #222737; font-weight: 800;
  font-size: calc(var(--s) * .34); border: 2px solid var(--bg);
}
.av .crown { position: absolute; top: calc(var(--s) * -.32); left: 50%; transform: translateX(-50%) rotate(-8deg); font-style: normal; font-size: calc(var(--s) * .42); filter: drop-shadow(0 2px 2px #000); }
.av .fire { position: absolute; bottom: -4px; right: -8px; font-style: normal; font-size: 11px; font-weight: 800; background: var(--bg); border-radius: 999px; padding: 0 4px; border: 1px solid var(--red); }

/* ---------- lists / tables ---------- */
.list { display: flex; flex-direction: column; }
.li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.li:last-child { border-bottom: 0; }
.li .pos { width: 30px; text-align: center; font-weight: 800; flex: none; }
.li .pts { font-weight: 800; font-size: 20px; min-width: 40px; text-align: right; }
.li .pts small { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .chip { flex: none; }
.scroll-x { overflow-x: auto; }
table.mx { border-collapse: collapse; font-size: 13px; }
table.mx th, table.mx td { border: 1px solid var(--line); padding: 6px; text-align: center; min-width: 38px; }
table.mx th { color: var(--muted); font-weight: 700; white-space: nowrap; }
table.mx td.none { background: rgba(255,46,69,.12); color: var(--red2); }
table.mx td.self { background: #0d0f15; }
table.mx td.win { color: var(--green); font-weight: 800; }

/* ---------- player picker ---------- */
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; }
.pk { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 14px; border: 2px solid transparent; background: var(--card2); cursor: pointer; font-size: 13px; font-weight: 600; text-align: center; color: var(--text); }
.pk.a { border-color: var(--red); background: rgba(255,46,69,.15); }
.pk.b { border-color: var(--blue); background: rgba(42,107,255,.15); }
.pk.off { opacity: .45; }
.pk .nm { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.side { border-radius: 14px; padding: 10px; min-height: 64px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.side.a { background: rgba(255,46,69,.12); border: 1px dashed var(--red); }
.side.b { background: rgba(42,107,255,.12); border: 1px dashed var(--blue); }

/* ---------- live scoreboard ---------- */
.live { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--bg); }
.live .half { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; user-select: none; padding: 10px; cursor: pointer; }
.live .half.a { background: linear-gradient(180deg, rgba(255,46,69,.30), rgba(255,46,69,.08)); }
.live .half.b { background: linear-gradient(0deg, rgba(42,107,255,.30), rgba(42,107,255,.08)); }
.live .score { font-size: min(32vw, 22vh); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.live .who { font-weight: 800; font-size: 18px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.live .bar { display: flex; gap: 8px; padding: 8px 12px; background: #0b0c12; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); align-items: center; }
.live .minus { position: absolute; right: 12px; top: 12px; }
.live .serve { position: absolute; left: 12px; top: 12px; font-size: 14px; font-weight: 700; background: rgba(0,0,0,.4); padding: 4px 10px; border-radius: 999px; }
.live .addrow { display: flex; gap: 8px; margin-top: 10px; }
.live .addrow .btn { min-width: 58px; min-height: 52px; font-size: 18px; }
.truco-col { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 260px; min-height: 40px; }
.palito { width: 34px; height: 34px; }
.palito path { stroke: var(--text); stroke-width: 3.2; stroke-linecap: round; fill: none; }
.buenas { font-size: 12px; font-weight: 800; color: var(--gold); letter-spacing: 1px; margin-top: 6px; }

/* ---------- misc ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: #222737; border: 1px solid var(--line); padding: 12px 16px; border-radius: 14px; z-index: 60;
  display: flex; gap: 12px; align-items: center; max-width: calc(100vw - 28px); box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.toast.err { border-color: var(--red); }
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.7); display: flex; align-items: flex-end; justify-content: center; }
.modal .sheet { background: var(--card); border: 1px solid var(--line); border-radius: 20px 20px 0 0; width: 100%; max-width: 640px; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto; }
.banner { border-radius: var(--radius); padding: 14px; margin: 12px 0; border: 1px solid var(--red); background: linear-gradient(120deg, rgba(255,46,69,.22), rgba(42,107,255,.12)); }
.banner b { display: block; margin-bottom: 8px; }
.opt { display: flex; width: 100%; text-align: left; justify-content: flex-start; margin: 6px 0; }
.feed .li { font-size: 14px; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; text-align: center; }
.podium .p { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 700; font-size: 13px; min-width: 0; }
.podium .p .ellipsis { max-width: 100%; }
.podium .step { width: 100%; border-radius: 10px 10px 0 0; background: var(--card2); border: 1px solid var(--line); font-weight: 900; padding: 6px 0; }
.podium .p1 .step { height: 64px; border-color: var(--gold); }
.podium .p2 .step { height: 44px; border-color: var(--green); }
.podium .p3 .step { height: 30px; border-color: var(--third); }
.reels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reel { background: var(--card2); border: 2px solid var(--line); border-radius: 16px; padding: 18px 8px; text-align: center; min-height: 96px; display: flex; flex-direction: column; justify-content: center; }
.reel .l { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.reel .v { font-size: 19px; font-weight: 900; margin-top: 6px; }
.reel.spin .v { animation: blink .12s infinite; }
.reel.done { border-color: var(--gold); box-shadow: 0 0 24px rgba(245,197,24,.3); }
@keyframes blink { 50% { opacity: .5; } }
.pollbar { height: 8px; border-radius: 999px; background: var(--card2); overflow: hidden; margin-top: 6px; }
.pollbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--red)); }
.hero-photo { width: 180px; height: 180px; border-radius: 50%; margin: 10px auto; display: flex; align-items: center; justify-content: center; background: var(--card2); border: 4px solid var(--blue); overflow: hidden; font-size: 60px; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
details.adm { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin: 10px 0; }
details.adm > summary { padding: 16px; font-weight: 800; cursor: pointer; list-style: none; }
details.adm > summary::-webkit-details-marker { display: none; }
details.adm > summary::after { content: "▾"; float: right; color: var(--muted); }
details.adm[open] > summary::after { content: "▴"; }
details.adm > .in { padding: 0 14px 14px; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }