:root{--bg:#06120c;--bg2:#0b1f14;--card:#10301e;--card2:#16412a;--line:#1f5a3a;--fg:#eaf7ee;--mut:#8fb7a0;--lime:#b6ff3c;--gold:#ffcf4a;--red:#ff5a5a;--blue:#4aa8ff;--r:14px;--glow:#134b2b;--bar:#0a2416;--top:rgba(6,18,12,.92);--top2:rgba(6,18,12,.96);--ln:var(--ln);--ov:rgba(255,255,255,.04);--ac1:#c9ff60;--ac2:#8fe01f;--acb:#b6ff3c;--onac:#07260f}
:root[data-theme=escuro]{--bg:#0d0e11;--bg2:#15171c;--card:#1c1f26;--card2:#262a33;--line:#363b47;--fg:#eceef2;--mut:#9aa1b0;--glow:#23262f;--bar:#0a0b0d;--top:rgba(13,14,17,.92);--top2:rgba(13,14,17,.96);--ln:rgba(120,128,145,.3)}
:root[data-theme=claro]{--bg:#eef3ef;--bg2:#e2eae4;--card:#ffffff;--card2:#e6eee8;--line:#c2d0c7;--fg:#13241a;--mut:#58705f;--lime:#2c8a0a;--gold:#a87000;--red:#c92f2f;--blue:#1565c0;--glow:#d5e6da;--bar:#cfdad2;--top:rgba(238,243,239,.94);--top2:rgba(238,243,239,.97);--ln:rgba(80,110,90,.25);--ov:rgba(0,0,0,.05)}
:root[data-theme=vermelho]{--bg:#14070a;--bg2:#1f0c10;--card:#2e1117;--card2:#40181f;--line:#6a2330;--fg:#fbeaec;--mut:#c79aa2;--lime:#ff9a7a;--glow:#4a1420;--bar:#220a0f;--top:rgba(20,7,10,.92);--top2:rgba(20,7,10,.96);--ln:rgba(106,35,48,.5);--ac1:#ff8a70;--ac2:#e0391f;--acb:#ff6a4a;--onac:#fff}
:root[data-theme=azul]{--bg:#060e1c;--bg2:#0a1930;--card:#0f2548;--card2:#173464;--line:#25508a;--fg:#e8f1ff;--mut:#93abd0;--lime:#6fd0ff;--glow:#123a72;--bar:#07142a;--top:rgba(6,14,28,.92);--top2:rgba(6,14,28,.96);--ln:rgba(37,80,138,.5);--ac1:#7fd6ff;--ac2:#2a8fe0;--acb:#6fd0ff;--onac:#04162e}
:root[data-theme=roxo]{--bg:#0f0816;--bg2:#190f27;--card:#251639;--card2:#34204f;--line:#5a3a8a;--fg:#f1eafb;--mut:#b4a0d0;--lime:#d29bff;--glow:#3b1f66;--bar:#150c22;--top:rgba(15,8,22,.92);--top2:rgba(15,8,22,.96);--ln:rgba(90,58,138,.5);--ac1:#e0b0ff;--ac2:#a45be0;--acb:#d29bff;--onac:#1a0a2c}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
body{min-height:100vh;background:radial-gradient(1200px 500px at 50% -10%,var(--glow) 0,transparent 60%),var(--bg)}
button{font:inherit;color:inherit;cursor:pointer}
.wrap{max-width:980px;margin:0 auto;padding:12px 16px 90px}
h1,h2,h3{margin:0}h2{font-size:18px;margin-bottom:10px}h3{font-size:15px;color:var(--mut);margin:14px 0 8px;letter-spacing:.04em;text-transform:uppercase}
.card{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px}
.row{display:flex;gap:10px;align-items:center}.sp{justify-content:space-between}.wrapf{flex-wrap:wrap}.grow{flex:1}
.btn{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:10px 16px;font-weight:700}
.btn.pri{background:linear-gradient(180deg,var(--ac1),var(--ac2));color:var(--onac);border-color:var(--acb)}
.btn.gold{background:linear-gradient(180deg,#ffe07a,#f0b020);color:#3a2600;border-color:#ffcf4a}
.btn.sm{padding:6px 10px;font-size:13px;border-radius:9px}.btn:disabled{opacity:.4;cursor:default}
.btn.on{outline:2px solid var(--lime)}
.mut{color:var(--mut)}.lime{color:var(--lime)}.gold{color:var(--gold)}.red{color:var(--red)}.b{font-weight:800}
.top{position:sticky;top:0;z-index:5;background:var(--top);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{padding-bottom:10px}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--top2);border-top:1px solid var(--line);display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom)}
.nav button{flex:1;max-width:160px;background:none;border:0;padding:10px 2px 8px;color:var(--mut);font-size:12px;font-weight:700}
.nav button i{display:block;font-style:normal;font-size:20px;line-height:1.1}.nav button.on{color:var(--lime)}
table{width:100%;border-collapse:collapse;font-size:13.5px}th{color:var(--mut);font-weight:600;text-align:right;padding:6px 4px;border-bottom:1px solid var(--line);font-size:12px}
td{padding:6px 4px;text-align:right;border-bottom:1px solid var(--ln)}th:first-child,td:first-child,td.l,th.l{text-align:left}
tr.me td{background:rgba(182,255,60,.12)}tr.zone-cl td:first-child{box-shadow:inset 3px 0 var(--blue)}tr.zone-lib td:first-child{box-shadow:inset 3px 0 var(--gold)}tr.zone-rel td:first-child{box-shadow:inset 3px 0 var(--red)}
.tw{overflow-x:auto}
.badge{display:inline-block;vertical-align:middle;flex:none}
.tag{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:800;background:var(--card2);border:1px solid var(--line);color:var(--mut)}
.ovr{display:inline-block;min-width:30px;text-align:center;padding:2px 6px;border-radius:7px;font-weight:900;color:#06120c}
.bar{height:6px;border-radius:9px;background:var(--bar);overflow:hidden;min-width:44px}.bar i{display:block;height:100%;background:var(--lime)}
.grid{display:grid;gap:10px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.gc{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media(max-width:600px){.g2{grid-template-columns:1fr}}
.club{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;text-align:left;width:100%}
.club:hover{border-color:var(--lime)}
.hero{text-align:center;padding:40px 10px 10px}.hero h1{font-size:clamp(34px,9vw,64px);font-weight:900;letter-spacing:.02em;line-height:1}
.hero h1 span{color:var(--lime)}.hero p{color:var(--mut);max-width:560px;margin:10px auto 0}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px}.tabs button{white-space:nowrap}
input,select{background:var(--bg2);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;width:100%}
/* campo */
.pitch{position:relative;background:repeating-linear-gradient(0deg,#1d7a3c 0 38px,#1a7036 38px 76px);border:2px solid #e9fff0;border-radius:12px;aspect-ratio:3/4;max-width:420px;margin:0 auto;overflow:hidden}
.pitch:before{content:"";position:absolute;inset:8px;border:2px solid rgba(255,255,255,.55);border-radius:6px}
.pitch:after{content:"";position:absolute;left:8px;right:8px;top:50%;border-top:2px solid rgba(255,255,255,.55)}
.pl{position:absolute;transform:translate(-50%,-50%);text-align:center;width:64px;z-index:2;background:none;border:0;padding:0}
.pl .dot{width:34px;height:34px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;color:#06120c;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.pl small{display:block;font-size:10.5px;font-weight:700;text-shadow:0 1px 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl.sel .dot{outline:3px solid var(--gold)}
/* partida */
.score{display:flex;align-items:center;justify-content:center;gap:14px;font-size:clamp(28px,8vw,48px);font-weight:900}
.score .t{font-size:13px;font-weight:700;text-align:center;max-width:120px}
.clock{font-size:18px;font-weight:900;color:var(--lime);text-align:center}
.log{max-height:300px;overflow:auto;display:flex;flex-direction:column;gap:6px}
.ev{display:flex;gap:8px;align-items:center;font-size:14px;padding:6px 8px;border-radius:8px;background:var(--ov)}
.ev.goal{background:rgba(182,255,60,.14);font-weight:800}.ev .m{min-width:34px;color:var(--mut);font-weight:700}
#modal{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.72);display:flex;align-items:flex-start;justify-content:center;padding:20px 12px;overflow:auto}
#modal[hidden]{display:none}#modal .box{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:16px;max-width:640px;width:100%}
.toast{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);background:var(--card2);border:1px solid var(--lime);padding:10px 16px;border-radius:12px;z-index:30;font-weight:700}
.pos-GK{background:#ffcf4a}.pos-DEF{background:#4aa8ff}.pos-MID{background:#b6ff3c}.pos-ATT{background:#ff7a5a}
.legend{display:flex;gap:10px;font-size:11px;color:var(--mut);margin-top:6px}.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px}
.vs{font-size:13px;color:var(--mut);font-weight:800}
.ko{display:grid;gap:6px}.tie{display:flex;justify-content:space-between;gap:8px;background:var(--ov);border-radius:8px;padding:6px 10px;font-size:13.5px}
.tie .w{font-weight:900;color:var(--lime)}

.swatch{display:flex;align-items:center;gap:10px;width:100%;margin-bottom:8px;text-align:left}.swatch i{display:inline-block;width:46px;height:26px;border-radius:8px;border:1px solid var(--line)}.swatch.on{outline:2px solid var(--lime)}

.nav{overflow-x:auto;justify-content:flex-start}.nav button{min-width:64px;flex:1 0 auto}@media(min-width:760px){.nav{justify-content:center}}