:root{
  --bg: #0f3538;
  --bg-deep: #0a2426;
  --card: #164348;
  --card-2: #1c5157;
  --rust: #c1472e;
  --rust-dark: #9c3620;
  --gold: #f0a93c;
  --gold-soft: #f6c877;
  --cream: #f6ede0;
  --cream-dim: #cfc2ac;
  --teal-bright: #57cdd0;
  --line: rgba(246,237,224,0.14);
  --ok: #6fbf8a;
  --bad: #d9695a;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background: radial-gradient(1200px 700px at 50% -10%, #1a5559 0%, var(--bg) 55%, var(--bg-deep) 100%);
  color: var(--cream);
  font-family: 'Nunito', sans-serif;
  padding-bottom: 60px;
  min-height: 100vh;
}
.wrap{ max-width: 640px; margin: 0 auto; padding: 0 16px; }

a{ color: var(--teal-bright); }

/* ---------- Header ---------- */
.hero{
  position: relative;
  overflow: hidden;
  border-radius: 0 0 28px 28px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  margin-bottom: 18px;
}
.hero img{ display:block; width:100%; height: auto; }
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,36,38,0) 40%, rgba(10,36,38,0.92) 100%);
}
.hero-text{
  position:absolute; left:0; right:0; bottom:0;
  padding: 14px 18px 16px;
}
h1.title{
  font-family:'Fredoka', sans-serif;
  font-weight:700;
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  margin: 0 0 2px;
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(0,0,0,0.35);
  letter-spacing: 0.3px;
}
.subtitle{
  margin:0;
  color: var(--gold-soft);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}

.team-row{
  display:flex; gap:10px; align-items:center;
  margin: 14px 0 6px;
}
.team-row label{
  font-weight:800; font-size:0.85rem; color: var(--cream-dim);
  text-transform: uppercase; letter-spacing: 0.6px;
  white-space:nowrap;
}
.team-row input{
  flex:1;
  background: var(--card);
  border: 2px solid var(--line);
  color: var(--cream);
  font-family:'Fredoka', sans-serif;
  font-size: 1.05rem;
  font-weight:600;
  border-radius: 12px;
  padding: 10px 12px;
  outline:none;
}
.team-row input:focus{ border-color: var(--teal-bright); }
.team-row input::placeholder{ color: var(--cream-dim); opacity:0.6; }
.save-hint{ font-size:0.72rem; color: var(--cream-dim); margin: 2px 2px 0; min-height: 1em; }

/* ---------- Score bar ---------- */
.scorebar{
  display:flex; align-items:center; gap:14px;
  background: linear-gradient(160deg, var(--card-2), var(--card));
  border: 2px solid var(--line);
  border-radius: 20px;
  padding: 12px 16px;
  margin: 6px 0 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.mug{ width: 54px; height: 62px; flex-shrink:0; }
.score-info{ flex:1; }
.score-label{
  font-size:0.72rem; font-weight:800; letter-spacing:0.8px;
  color: var(--cream-dim); text-transform:uppercase; margin:0;
}
.score-num{
  font-family:'Fredoka', sans-serif;
  font-size: 2rem; font-weight:700; line-height:1.05;
  color: var(--gold-soft);
  margin:0;
  font-variant-numeric: tabular-nums;
}
.score-num span{ font-size:1.1rem; color:var(--cream-dim); font-weight:700; }
.score-breakdown{
  font-size:0.72rem; color: var(--cream-dim); margin-top:2px;
}

/* ---------- Cards ---------- */
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 16px 18px;
  margin-bottom: 16px;
}
.card h2{
  font-family:'Fredoka', sans-serif;
  font-size: 1.15rem;
  font-weight:600;
  margin: 0 0 4px;
  color: var(--cream);
  display:flex; align-items:center; gap:8px;
}
.card .hint{
  font-size:0.82rem; color: var(--cream-dim); margin: 0 0 12px;
}
.pill{
  display:inline-block;
  background: var(--rust);
  color: var(--cream);
  font-weight:800;
  font-size:0.72rem;
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing:0.3px;
}
.pill.ok{ background: var(--ok); color: var(--bg-deep); }
.pill.bad{ background: var(--bad); }
.pill.wait{ background: var(--card-2); border: 1px solid var(--line); color: var(--cream-dim); }

/* ---------- Bar counter ---------- */
.counter-row{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top: 6px;
}
.counter-btn{
  width:46px; height:46px; border-radius:50%;
  border:2px solid var(--teal-bright);
  background: transparent;
  color: var(--teal-bright);
  font-size:1.5rem; font-weight:800;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: transform .12s ease, background .12s ease;
}
.counter-btn:active{ transform: scale(0.92); background: rgba(87,205,208,0.15); }
.counter-btn:disabled{ opacity:0.35; cursor:default; }
.counter-display{ text-align:center; min-width: 120px; }
.counter-display .num{ font-family:'Fredoka', sans-serif; font-size:1.9rem; font-weight:700; }
.counter-display .cap{ font-size:0.75rem; color:var(--cream-dim); }

/* ---------- Task list ---------- */
.task{
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.task:last-child{ border-bottom:none; }
.task-top{ display:flex; align-items:flex-start; gap:12px; }
.task-body{ flex:1; }
.task-title{
  font-weight:800; font-size:0.98rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
}
.task-title.done{ color: var(--ok); }
.task-desc{ font-size:0.87rem; color: var(--cream-dim); margin-top:2px; }
.task-pts{ font-weight:800; color: var(--gold-soft); font-size:0.85rem; white-space:nowrap; }

.task-submit{ margin-top:10px; }
textarea.poem, textarea.textinput{
  width:100%; min-height:80px;
  background: var(--bg-deep);
  border: 2px solid var(--line);
  border-radius: 12px;
  color: var(--cream);
  font-family:'Nunito', sans-serif;
  font-style: italic;
  padding: 10px 12px;
  margin-top:4px;
  resize: vertical;
  outline:none;
}
textarea.poem:focus, textarea.textinput:focus{ border-color: var(--teal-bright); }

.file-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:6px; }
input[type="file"]{
  color: var(--cream-dim);
  font-size: 0.82rem;
  max-width: 100%;
}
.btn{
  background: var(--rust);
  color: var(--cream);
  border: none;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
}
.btn:active{ background: var(--rust-dark); }
.btn:disabled{ opacity:0.5; cursor:default; }
.btn.secondary{
  background: none; border: 2px solid var(--teal-bright); color: var(--teal-bright);
}
.btn.danger{
  background: none; border: 2px solid var(--bad); color: var(--bad);
}
.btn.small{ padding: 6px 12px; font-size: 0.78rem; }

.submitted-preview{ margin-top:8px; font-size:0.82rem; color: var(--cream-dim); }
.submitted-preview img, .submitted-preview video{
  max-width: 160px; border-radius: 10px; display:block; margin-top:6px;
}

/* ---------- Details / collapsibles ---------- */
details.card{ padding: 0; }
details.card summary{
  list-style:none;
  cursor:pointer;
  padding: 16px;
  display:flex; align-items:center; justify-content:space-between;
  font-family:'Fredoka', sans-serif;
  font-weight:600; font-size:1.05rem;
}
details.card summary::-webkit-details-marker{ display:none; }
details.card summary .chev{
  transition: transform .2s ease;
  color: var(--teal-bright);
  font-size:1.1rem;
}
details.card[open] summary .chev{ transform: rotate(180deg); }
details.card .inner{
  padding: 0 16px 16px;
  font-size:0.92rem;
  line-height:1.55;
  color: var(--cream-dim);
}
details.card .inner ul{ padding-left: 20px; margin: 8px 0; }
details.card .inner li{ margin-bottom:6px; }
details.card .inner img{ width:100%; border-radius:12px; margin: 8px 0; display:block; }
details.card .inner strong{ color: var(--cream); }

.disclaimer .inner{ font-size:0.82rem; }
.disclaimer summary{ color: var(--gold-soft); }

.footer-note{
  text-align:center; font-size:0.78rem; color: var(--cream-dim);
  margin-top: 18px; line-height:1.5;
}

/* ---------- Generic form bits ---------- */
.field{ margin-bottom: 14px; }
.field label{
  display:block; font-weight:800; font-size:0.85rem; color: var(--cream-dim);
  text-transform: uppercase; letter-spacing: 0.6px; margin-bottom:6px;
}
.field input[type="text"], .field input[type="password"]{
  width:100%;
  background: var(--card);
  border: 2px solid var(--line);
  color: var(--cream);
  font-family:'Fredoka', sans-serif;
  font-size: 1.05rem;
  font-weight:600;
  border-radius: 12px;
  padding: 10px 12px;
  outline:none;
}
.field input:focus{ border-color: var(--teal-bright); }
.error-msg{ color: var(--bad); font-weight:700; font-size:0.85rem; margin-top:6px; }
.ok-msg{ color: var(--ok); font-weight:700; font-size:0.85rem; margin-top:6px; }

/* ---------- Leaderboard ---------- */
.lb-row{
  display:flex; align-items:center; gap:12px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--line);
}
.lb-row:last-child{ border-bottom:none; }
.lb-rank{
  font-family:'Fredoka', sans-serif; font-weight:700; font-size:1.2rem;
  width: 34px; text-align:center; color: var(--cream-dim); flex-shrink:0;
}
.lb-row.top1 .lb-rank{ color: var(--gold-soft); font-size:1.5rem; }
.lb-row.top2 .lb-rank{ color: #c7d2d6; font-size:1.35rem; }
.lb-row.top3 .lb-rank{ color: #d8a37a; font-size:1.25rem; }
.lb-name{ flex:1; font-weight:800; font-size:1rem; }
.lb-sub{ font-size:0.75rem; color: var(--cream-dim); }
.lb-score{
  font-family:'Fredoka', sans-serif; font-weight:700; font-size:1.3rem; color: var(--gold-soft);
  white-space:nowrap;
}
.updated-note{ text-align:center; font-size:0.75rem; color: var(--cream-dim); margin-top:10px; }

/* ---------- Admin ---------- */
.admin-team-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.admin-team-row:last-child{ border-bottom:none; }
.admin-team-name{ font-weight:800; flex:1; min-width: 140px; }
.admin-team-code{
  font-family: monospace; font-size:0.95rem; background: var(--bg-deep);
  padding: 3px 8px; border-radius:8px; letter-spacing:1px;
}
.sub-card{
  border-bottom: 1px solid var(--line); padding: 14px 0;
}
.sub-card:last-child{ border-bottom:none; }
.sub-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.sub-actions{ display:flex; gap:8px; margin-top:8px; }
.tabs{ display:flex; gap:8px; margin-bottom:14px; }
.tab-btn{
  background: none; border:2px solid var(--line); color: var(--cream-dim);
  font-weight:800; font-size:0.82rem; padding: 8px 14px; border-radius:999px; cursor:pointer;
}
.tab-btn.active{ border-color: var(--teal-bright); color: var(--teal-bright); }

.copy-link{ font-size: 0.78rem; word-break: break-all; color: var(--cream-dim); }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}