:root{
  --bg:#0f0f12;
  --panel:#1b1c1f;
  --line:#ffffff16;
  --muted:#9aa0a6;
  --text:#e9e9e9;
  --accent:#ffd966;
  --accent-border:#b28900;
  --danger:#ff6b6b;
  --ok:#21c45d;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.site-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border-bottom:1px solid #222;
  background:#111114;
}
.logo-link{line-height:0}
.site-header img{height:56px;width:auto}
.header-center{
  flex:1;
  display:flex;
  justify-content:center;
}
.header-center h1{
  margin:0;
  color:var(--accent);
  font-size:clamp(18px,3vw,28px);
  text-align:center;
}
.header-actions{
  margin-left:auto;
  display:flex;
  gap:8px;
}
.btn{
  border:1px solid var(--accent-border);
  background:transparent;
  color:var(--accent);
  padding:8px 14px;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
}
.page{
  max-width:860px;
  margin:0 auto;
  padding:10px 8px 16px;
}
.topbar,.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
}
.topbar{
  padding:10px;
}
.controls{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
}
label{
  display:grid;
  gap:4px;
  font-size:10px;
  color:var(--muted);
  font-weight:700;
}
input,select,button{font:inherit}
input,select{
  width:100%;
  border:1px solid #2d3136;
  background:#0c0d0e;
  color:var(--text);
  border-radius:8px;
  padding:7px 9px;
  font-size:11px;
}
.actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.actions button{
  border:1px solid var(--accent-border);
  background:linear-gradient(180deg, var(--accent), #e6a800);
  color:#111;
  font-weight:900;
  border-radius:8px;
  padding:8px 12px;
  cursor:pointer;
  font-size:12px;
}
.actions button:disabled{
  opacity:.6;
  cursor:not-allowed;
}
.hint{
  color:var(--muted);
  font-size:11px;
  margin-top:8px;
}
.layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:8px;
  margin-top:10px;
  align-items:start;
}
#localRoot, #visitanteRoot{
  width:100%;
  max-width:426px;
}
#localRoot{justify-self:end}
#visitanteRoot{justify-self:start}
.card{
  padding:10px 9px;
}
.team-role{
  text-align:center;
  color:var(--muted);
  font-size:8px;
  letter-spacing:.08em;
  margin:0 0 5px;
}
.team-title{
  text-align:center;
  color:var(--accent);
  font-size:14px;
  margin:0 0 3px;
}
.section{margin-top:9px}
.section h3{
  margin:0 0 5px;
  text-align:center;
  color:var(--accent);
  letter-spacing:.06em;
  font-size:8px;
}
.row{
  display:grid;
  grid-template-columns:20px 46% 26px;
  justify-content:center;
  gap:5px;
  align-items:center;
  margin:4px 0;
}
.row.right{
  grid-template-columns:26px 46% 20px;
  justify-content:center;
}
.badge,.ptsbox,.totalbox,.winsbox{
  display:grid;
  place-items:center;
  border-radius:6px;
  font-weight:900;
}
.badge{
  height:20px;
  background:var(--accent);
  color:#111;
  font-size:9px;
}
.select-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  min-width:0;
}
.player-select{
  width:100%;
  max-width:188px;
  min-height:22px;
  border-radius:7px;
  background:#fff;
  color:#111;
  border:0;
  padding:4px 8px;
  font-weight:700;
  font-size:9px;
}
.ptsbox{
  height:20px;
  background:#fff;
}
.ptsbox select{
  border:none;
  background:transparent;
  color:#111;
  padding:0;
  text-align:center;
  font-weight:900;
  font-size:10px;
}
.hidden-box{
  visibility:hidden;
}
.totals{
  display:flex;
  justify-content:flex-end;
  margin-top:9px;
}
.totals.right{
  justify-content:flex-start;
}
.wins-wrap{
  margin-top:6px;
}
.chip{
  display:flex;
  align-items:center;
  gap:6px;
  background:#0d0e10;
  border:1px solid #2d3136;
  border-radius:8px;
  padding:6px 7px;
}
.chip.reverse{
  flex-direction:row-reverse;
}
.label{
  font-size:8px;
  font-weight:900;
}
.totalbox{
  width:20px;
  height:20px;
  background:#fff;
  color:#111;
  font-size:10px;
}
.winsbox{
  width:26px;
  height:26px;
  background:var(--accent);
  color:#111;
  font-size:13px;
}
.ok{color:var(--ok);font-weight:700}
.error{color:var(--danger);font-weight:700}

@media (max-width: 900px){
  .controls{
    grid-template-columns:1fr 1fr;
  }
  .layout{
    grid-template-columns:1fr;
  }
  #localRoot, #visitanteRoot{
    max-width:none;
    justify-self:stretch;
  }
  .row{
    grid-template-columns:22px 56% 28px;
  }
  .row.right{
    grid-template-columns:28px 56% 22px;
  }
  .player-select{
    max-width:none;
  }
}
@media (max-width:700px){
  .site-header{
    gap:6px;
    padding:6px;
  }
  .site-header img{height:34px}
  .header-center h1{font-size:15px}
  .btn{padding:6px 10px;font-size:12px}
  .page{padding:10px 8px 16px}
  .topbar{padding:12px}
  .controls{gap:8px}
  label{font-size:11px}
  input,select{font-size:12px;padding:8px 10px}
  .actions button{font-size:12px;padding:8px 10px}
  .hint{font-size:11px}
  .card{padding:12px}
  .team-role{font-size:11px}
  .team-title{font-size:20px}
  .section h3{font-size:12px}
  .row{grid-template-columns:24px 1fr 34px;gap:6px}
  .row.right{grid-template-columns:34px 1fr 24px}
  .badge{height:24px;font-size:10px}
  .player-select{min-height:28px;font-size:11px;padding:6px 8px;max-width:none}
  .ptsbox{height:24px}
  .ptsbox select{font-size:11px}
  .totals{margin-top:10px}
  .wins-wrap{margin-top:6px}
  .chip{padding:7px 8px;border-radius:8px}
  .label{font-size:10px}
  .totalbox{width:24px;height:24px;font-size:11px}
  .winsbox{width:28px;height:28px;font-size:14px}
}