@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&family=Heebo:wght@300;400;500;700&display=swap');

:root{
  --cream:#FBF3E7;
  --cream-2:#FFFCF7;
  --wine:#7A2333;
  --wine-dark:#5A1826;
  --gold:#C9A227;
  --gold-light:#E8C766;
  --ink:#3B2A22;
  --ink-soft:#6B5548;
  --gold-1:#FFD700;
  --silver-2:#C7CCD1;
  --bronze-3:#CD7F32;
  --shadow: 0 10px 30px rgba(90,24,38,0.12);
  --radius: 18px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:'Heebo', sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(201,162,39,0.10), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(122,35,51,0.08), transparent 45%),
    var(--cream);
  color:var(--ink);
  direction:rtl;
  min-height:100vh;
  line-height:1.6;
}

.wrap{
  max-width:880px;
  margin:0 auto;
  padding:24px 18px 70px;
}

/* ---------- Header ---------- */
.site-header{
  text-align:center;
  padding:38px 20px 30px;
  position:relative;
}

.site-header .emoji-row{
  font-size:28px;
  letter-spacing:10px;
  margin-bottom:6px;
  opacity:0.9;
}

.site-header h1{
  font-family:'Rubik', sans-serif;
  font-weight:800;
  font-size:clamp(28px, 5vw, 42px);
  margin:0 0 6px;
  color:var(--wine);
  text-shadow: 0 2px 0 rgba(255,255,255,0.6);
}

.site-header p.subtitle{
  color:var(--ink-soft);
  font-size:17px;
  margin:0;
}

.gold-rule{
  width:120px;
  height:3px;
  margin:18px auto 0;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius:3px;
}

/* ---------- Nav ---------- */
.nav-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:30px 0;
}

.nav-cards a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-decoration:none;
  color:var(--wine);
  background:var(--cream-2);
  border:1px solid rgba(122,35,51,0.12);
  border-radius:var(--radius);
  padding:22px 12px;
  font-weight:600;
  font-size:15px;
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}

.nav-cards a:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(90,24,38,0.18);
}

.nav-cards a .icon{font-size:30px;}

/* ---------- Card / Panel ---------- */
.panel{
  background:var(--cream-2);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px 22px;
  margin-bottom:22px;
  border:1px solid rgba(122,35,51,0.08);
}

.panel h2{
  font-family:'Rubik', sans-serif;
  color:var(--wine);
  margin-top:0;
  font-size:22px;
  display:flex;
  align-items:center;
  gap:10px;
}

.panel .hint{
  color:var(--ink-soft);
  font-size:14px;
  margin-top:-6px;
  margin-bottom:16px;
}

/* ---------- Forms ---------- */
label{
  display:block;
  font-weight:500;
  margin:14px 0 6px;
  color:var(--ink);
  font-size:14.5px;
}

input[type="text"], select{
  width:100%;
  padding:13px 14px;
  border-radius:12px;
  border:1.5px solid #E5D7C3;
  background:#fff;
  font-family:inherit;
  font-size:15.5px;
  color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
  appearance:none;
  -webkit-appearance:none;
}

select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%237A2333' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:left 14px center;
  padding-left:36px;
}

input[type="text"]:focus, select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,39,0.18);
}

.row-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:none;
  cursor:pointer;
  font-family:'Rubik', sans-serif;
  font-weight:600;
  font-size:16px;
  padding:14px 22px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--wine), var(--wine-dark));
  color:#fff;
  box-shadow:0 8px 20px rgba(90,24,38,0.30);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  width:100%;
  margin-top:20px;
}

.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(90,24,38,0.36); }
.btn:disabled{ opacity:0.6; cursor:not-allowed; transform:none; }

.btn.gold{
  background:linear-gradient(135deg, var(--gold-light), var(--gold));
  color:var(--wine-dark);
  box-shadow:0 8px 20px rgba(201,162,39,0.35);
}

/* ---------- Messages ---------- */
.msg{
  margin-top:16px;
  padding:12px 14px;
  border-radius:12px;
  font-size:14.5px;
  font-weight:500;
  display:none;
}
.msg.show{display:block;}
.msg.success{ background:#E7F5EA; color:#256B37; border:1px solid #BFE3C7; }
.msg.error{ background:#FBE9E9; color:#A3312F; border:1px solid #F3C6C4; }

/* ---------- Families chips list ---------- */
.families-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.chip{
  background:#FFF6E5;
  border:1px solid var(--gold-light);
  color:var(--wine-dark);
  padding:8px 14px;
  border-radius:999px;
  font-size:14px;
  font-weight:500;
}

.chip .num{
  display:inline-block;
  background:var(--gold);
  color:#fff;
  width:20px;
  height:20px;
  line-height:20px;
  text-align:center;
  border-radius:50%;
  font-size:11px;
  margin-left:6px;
}

.empty-state{
  color:var(--ink-soft);
  font-size:14.5px;
  text-align:center;
  padding:14px 0;
}

/* ---------- Podium (Leaderboard) ---------- */
.podium{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:10px;
  margin:26px 0 10px;
  min-height:230px;
}

.podium-spot{
  flex:1;
  max-width:150px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.podium-spot .medal{
  font-size:34px;
  margin-bottom:6px;
}

.podium-spot .fam-name{
  font-family:'Rubik', sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--wine-dark);
  margin-bottom:4px;
  min-height:20px;
  word-break:break-word;
}

.podium-spot .pts{
  font-size:13px;
  color:var(--ink-soft);
  margin-bottom:8px;
}

.podium-bar{
  width:100%;
  border-radius:14px 14px 0 0;
  background:linear-gradient(180deg, var(--gold-light), var(--gold));
  box-shadow:0 -4px 14px rgba(201,162,39,0.3);
  transition:height .6s cubic-bezier(.2,.9,.3,1);
}

.podium-spot.place-1 .podium-bar{ background:linear-gradient(180deg, #FFE79A, var(--gold-1)); }
.podium-spot.place-2 .podium-bar{ background:linear-gradient(180deg, #E7EBEF, var(--silver-2)); }
.podium-spot.place-3 .podium-bar{ background:linear-gradient(180deg, #E6B98B, var(--bronze-3)); }

.podium-spot.place-1{ order:2; }
.podium-spot.place-2{ order:1; }
.podium-spot.place-3{ order:3; }
.podium-spot.place-1 .podium-bar{ height:170px; }
.podium-spot.place-2 .podium-bar{ height:120px; }
.podium-spot.place-3 .podium-bar{ height:85px; }

.podium-spot.place-1 .medal{ font-size:44px; }

/* ---------- Leaderboard list (rest) ---------- */
.lb-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.lb-row{
  display:flex;
  align-items:center;
  gap:12px;
  background:#FFFCF7;
  border:1px solid #F0E4D0;
  border-radius:12px;
  padding:10px 14px;
}

.lb-rank{
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--cream);
  border:1px solid var(--gold-light);
  color:var(--wine);
  font-weight:700;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.lb-name{
  flex:1;
  font-weight:500;
  font-size:15px;
}

.lb-points{
  font-family:'Rubik', sans-serif;
  font-weight:700;
  color:var(--wine);
  font-size:15px;
}

.live-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#FBE9E9;
  color:#B3302E;
  font-size:12.5px;
  font-weight:600;
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:8px;
}

.live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#E23B3B;
  animation:pulse 1.4s infinite;
}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(226,59,59,0.55);}
  70%{box-shadow:0 0 0 8px rgba(226,59,59,0);}
  100%{box-shadow:0 0 0 0 rgba(226,59,59,0);}
}

.stats-row{
  display:flex;
  gap:12px;
  justify-content:center;
  margin:6px 0 18px;
  flex-wrap:wrap;
}

.stat-pill{
  background:var(--cream);
  border:1px solid var(--gold-light);
  border-radius:999px;
  padding:8px 16px;
  font-size:13.5px;
  color:var(--wine-dark);
  font-weight:500;
}

.stat-pill b{ color:var(--wine); font-family:'Rubik', sans-serif; }

footer.site-footer{
  text-align:center;
  color:var(--ink-soft);
  font-size:13px;
  margin-top:30px;
}

@media (max-width:520px){
  .row-2{grid-template-columns:1fr;}
  .nav-cards{grid-template-columns:1fr;}
  .podium{gap:6px;}
}

/* ---------- Admin: family management row ---------- */
.btn-delete-fam{
  flex-shrink:0;
  border:1px solid #F3C6C4;
  background:#FBE9E9;
  color:#A3312F;
  width:30px;
  height:30px;
  border-radius:50%;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s ease, background .15s ease;
}

.btn-delete-fam:hover{
  background:#F3C6C4;
  transform:scale(1.08);
}

/* ---------- Danger buttons (reset actions) ---------- */
.btn + .btn{ margin-top:12px; }