:root{
  --cream:#FAF4E8;
  --walnut:#3E2417;
  --walnut-soft:#6B4226;
  --gold:#B8862B;
  --gold-light:#EFDFB3;
  --green:#3B5D46;
  --red:#8B3A3A;
  --line:#E4D6BC;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--cream);
  color:var(--walnut);
  font-family:'Public Sans', sans-serif;
  font-size:18px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
.triangles{display:flex; width:100%; height:34px; overflow:hidden;}
.tri{flex:1; height:0; border-left:14px solid transparent; border-right:14px solid transparent;}
.tri.up{border-bottom:34px solid var(--walnut);}
.tri.down{border-top:34px solid var(--gold);}

header{padding:28px 20px 20px; text-align:center;}
h1{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:clamp(30px,7vw,46px);
  margin:0 0 4px;
  letter-spacing:-0.01em;
}
.subtitle{color:var(--walnut-soft); font-size:16px; margin:0;}

.admin-toggle{
  position:fixed; top:14px; right:14px;
  background:transparent; border:2px solid var(--walnut-soft); color:var(--walnut-soft);
  border-radius:999px; padding:8px 16px; font-size:14px; font-weight:700;
  cursor:pointer; font-family:'Public Sans',sans-serif;
}
.admin-toggle:hover{background:var(--walnut-soft); color:var(--cream);}

main{max-width:760px; margin:0 auto; padding:0 16px 60px;}

.card{background:#fff; border:2px solid var(--line); border-radius:16px; padding:18px; margin-bottom:22px;}

.table-scroll{overflow-x:auto;}
table{width:100%; border-collapse:collapse; min-width:560px;}
th, td{text-align:left; padding:12px 8px; border-bottom:1px solid var(--line); font-size:17px; white-space:nowrap;}
th{font-size:13px; text-transform:uppercase; letter-spacing:0.04em; color:var(--walnut-soft);}
.mart-badge{color:var(--gold); font-weight:800;}
td.num, th.num{text-align:center;}
tr.rank1{background:var(--gold-light);}
tr.rank1 td:first-child{font-weight:800;}
.rank-cell{font-weight:800; font-family:'Fraunces',serif; font-size:20px;}
.name-cell{font-weight:700;}
.win{color:var(--green); font-weight:700;}
.loss{color:var(--red); font-weight:700;}
.points{font-weight:800; font-size:20px;}

.refresh-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; flex-wrap:wrap;}
.updated-at{color:var(--walnut-soft); font-size:14px;}

button.primary{
  background:var(--walnut); color:var(--cream); border:none; border-radius:12px;
  padding:14px 20px; font-size:17px; font-weight:700; cursor:pointer;
  font-family:'Public Sans',sans-serif; min-height:48px;
}
button.primary:hover{background:var(--walnut-soft);}
button.secondary{
  background:#fff; color:var(--walnut); border:2px solid var(--walnut-soft);
  border-radius:12px; padding:12px 18px; font-size:16px; font-weight:700; cursor:pointer; min-height:44px;
}
button.danger{
  background:#fff; color:var(--red); border:2px solid var(--red);
  border-radius:10px; padding:8px 14px; font-size:14px; font-weight:700; cursor:pointer;
}

h2{font-family:'Fraunces',serif; font-size:24px; margin:0 0 14px;}

label{display:block; font-weight:700; font-size:15px; margin:14px 0 6px; color:var(--walnut-soft);}
input[type=text], input[type=number], input[type=password], select{
  width:100%; padding:12px; font-size:18px; border:2px solid var(--line);
  border-radius:10px; font-family:'Public Sans',sans-serif; background:#fff; color:var(--walnut);
}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.players-grid{display:flex; flex-direction:column; gap:10px;}
.player-row{display:flex; gap:8px; align-items:center;}
.player-row input{flex:1;}

.match-row{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); gap:10px; flex-wrap:wrap;}
.match-text{font-size:16px;}

.overlay{position:fixed; inset:0; background:rgba(62,36,23,0.5); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50;}
.modal{background:#fff; border-radius:16px; padding:24px; max-width:380px; width:100%;}
.modal h2{margin-top:0;}
.error-text{color:var(--red); font-size:14px; margin-top:8px;}
.empty{color:var(--walnut-soft); text-align:center; padding:20px 0;}
.loading{text-align:center; padding:40px 0; color:var(--walnut-soft);}
footer{text-align:center; color:var(--walnut-soft); font-size:13px; padding:20px;}