@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Archivo+Black&family=DM+Mono:wght@400;500&display=swap');

:root{
  --ink:#0f1a12;
  --canvas:#f2ede1;
  --moss:#3a5a40;
  --moss-dark:#243d29;
  --clay:#c46b3f;
  --gold:#d4a24c;
  --paper:#e9e2d0;
  --line: rgba(15,26,18,0.14);
  --danger:#b23b3b;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:'Space Grotesk', sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(58,90,64,0.10), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(196,107,63,0.10), transparent 45%),
    repeating-linear-gradient(115deg, rgba(15,26,18,0.025) 0px, rgba(15,26,18,0.025) 1px, transparent 1px, transparent 5px);
  pointer-events:none;
  z-index:0;
}

.wrap{
  position:relative;
  z-index:1;
  max-width:1000px;
  margin:0 auto;
  padding:24px 24px 80px;
}

/* TOP BAR: role indicator + login/logout */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  gap:12px;
  flex-wrap:wrap;
}
.role-pill{
  font-family:'DM Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:7px 14px;
  border-radius:999px;
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--moss-dark);
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.role-pill .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--moss);
}
.role-pill.admin .dot{ background:var(--clay); }

.live-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--moss);
  margin-left:2px;
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse{
  0%, 100%{ opacity:0.4; transform:scale(0.85); }
  50%{ opacity:1; transform:scale(1.15); }
}

.topbar-actions{ display:flex; gap:10px; align-items:center; }

.btn-small{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:13px;
  padding:9px 18px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:transparent;
  color:var(--moss-dark);
  cursor:pointer;
  transition:transform 0.15s ease, background 0.15s ease;
}
.btn-small:hover{ background:rgba(15,26,18,0.05); }

/* LOGIN MODAL */
.modal-backdrop{
  display:none;
  position:fixed; inset:0;
  background:rgba(15,26,18,0.55);
  z-index:50;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.modal-backdrop.show{ display:flex; }
.modal-box{
  background:var(--canvas);
  border-radius:18px;
  padding:32px 28px;
  max-width:340px;
  width:100%;
  box-shadow:0 30px 60px -20px rgba(15,26,18,0.5);
}
.modal-box h3{
  font-family:'Archivo Black', sans-serif;
  font-size:20px;
  text-transform:uppercase;
  color:var(--moss-dark);
  margin-bottom:6px;
}
.modal-box p.hint{
  font-size:13px;
  color:rgba(15,26,18,0.55);
  margin-bottom:18px;
}
.modal-box input[type="password"]{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1.5px solid var(--line);
  background:var(--paper);
  font-family:'DM Mono', monospace;
  font-size:15px;
  color:var(--ink);
  margin-bottom:10px;
}
.modal-box input[type="password"]:focus{ outline:none; border-color:var(--clay); }
.modal-error{
  font-size:12.5px;
  color:var(--danger);
  min-height:18px;
  margin-bottom:8px;
}
.modal-actions{ display:flex; gap:10px; margin-top:6px; }
.modal-actions button{ flex:1; }

/* HEADER */
header.page-head{
  text-align:center;
  margin-bottom:38px;
}
.eyebrow{
  font-family:'DM Mono', monospace;
  font-size:12px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--moss);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before, .eyebrow::after{
  content:"";
  width:26px;height:1px;
  background:var(--moss);
  opacity:0.5;
}
h1{
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(32px, 6vw, 54px);
  line-height:1.02;
  letter-spacing:-0.01em;
  color:var(--moss-dark);
  text-transform:uppercase;
}
h1 span{color:var(--clay);}
.sub{
  margin-top:12px;
  font-size:15px;
  color:rgba(15,26,18,0.65);
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.5;
}

/* STAGE */
.stage{
  background:var(--moss-dark);
  border-radius:20px;
  padding:38px 28px;
  position:relative;
  overflow:hidden;
  box-shadow:0 20px 50px -20px rgba(15,26,18,0.5);
  margin-bottom:28px;
}
.stage::before{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 22px);
  pointer-events:none;
}
.stage-label{
  font-family:'DM Mono', monospace;
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold);
  text-align:center;
  margin-bottom:18px;
  opacity:0.85;
}
.participant-card{
  background:var(--paper);
  border-radius:14px;
  padding:26px 20px;
  text-align:center;
  position:relative;
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.participant-name{
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(22px, 4.4vw, 34px);
  text-transform:uppercase;
  color:var(--moss-dark);
  line-height:1.05;
  letter-spacing:-0.01em;
  word-break:break-word;
}
.participant-house{
  font-family:'DM Mono', monospace;
  font-size:14px;
  color:var(--clay);
  letter-spacing:0.05em;
}
.participant-placeholder{
  font-family:'DM Mono', monospace;
  font-size:14px;
  color:rgba(15,26,18,0.4);
  letter-spacing:0.1em;
}
.result-zone{
  margin-top:20px;
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.team-badge{
  display:none;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:22px 40px;
  border-radius:16px;
  border:2px solid var(--gold);
  background:linear-gradient(180deg, rgba(212,162,76,0.14), rgba(212,162,76,0.03));
}
.team-badge.show{
  display:flex;
  animation: badgeZoom 0.9s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes badgeZoom{
  0%{ transform:scale(0.3) rotate(-6deg); opacity:0; }
  60%{ transform:scale(1.12) rotate(2deg); opacity:1; }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}
.team-badge .emoji{ font-size:56px; filter:drop-shadow(0 6px 10px rgba(0,0,0,0.25)); }
.team-badge .name{
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(24px, 5vw, 36px);
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:0.02em;
}
.team-badge .tag{
  font-family:'DM Mono', monospace;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(233,226,208,0.65);
}

/* CONTROLS */
.controls{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-bottom:44px;
  flex-wrap:wrap;
}
button.btn{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:15px;
  letter-spacing:0.02em;
  padding:15px 30px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
#shuffleBtn{
  background:var(--clay);
  color:var(--paper);
  box-shadow:0 10px 24px -8px rgba(196,107,63,0.55);
}
#shuffleBtn:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(196,107,63,0.65); }
#shuffleBtn:disabled{ opacity:0.55; cursor:not-allowed; transform:none; }
#resetBtn{
  background:transparent;
  color:var(--moss-dark);
  border:1.5px solid var(--line);
}
#resetBtn:hover{ background:rgba(15,26,18,0.05); }

.viewer-note{
  text-align:center;
  font-family:'DM Mono', monospace;
  font-size:12px;
  letter-spacing:0.05em;
  color:rgba(15,26,18,0.45);
  margin-bottom:36px;
}

/* PROGRESS */
.progress-track{ max-width:420px; margin:0 auto 46px; text-align:center; }
.progress-text{
  font-family:'DM Mono', monospace;
  font-size:12px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:rgba(15,26,18,0.55);
  margin-bottom:8px;
}
.progress-bar{ height:4px; background:var(--line); border-radius:99px; overflow:hidden; }
.progress-fill{ height:100%; width:0%; background:var(--moss); border-radius:99px; transition:width 0.6s ease; }

/* TEAM BOARD */
.board-heading{
  font-family:'DM Mono', monospace;
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--moss);
  text-align:center;
  margin-bottom:20px;
}
.board{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:18px;
}
.team-card{
  background:var(--paper);
  border-radius:16px;
  padding:20px 20px 16px;
  border:1px solid var(--line);
  position:relative;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.team-card.filled{ box-shadow:0 14px 30px -18px rgba(15,26,18,0.3); }
.team-card.just-filled{ animation: cardPulse 0.7s ease; }
@keyframes cardPulse{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.035); box-shadow:0 18px 34px -14px rgba(212,162,76,0.55); }
  100%{ transform:scale(1); }
}
.team-card-head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px; padding-bottom:12px;
  border-bottom:1px dashed var(--line);
}
.team-card-emoji{
  font-size:26px; width:42px;height:42px;
  display:flex; align-items:center; justify-content:center;
  background:var(--canvas); border-radius:10px; flex-shrink:0;
}
.team-card-title{
  font-family:'Archivo Black', sans-serif;
  font-size:15px; text-transform:uppercase;
  color:var(--moss-dark); letter-spacing:0.01em;
}
.team-card-empty-tag{
  font-family:'DM Mono', monospace;
  font-size:10px; color:rgba(15,26,18,0.4);
  letter-spacing:0.1em; text-transform:uppercase;
}
.member-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:6px 2px; font-size:13.5px;
  border-bottom:1px solid rgba(15,26,18,0.06);
}
.member-row:last-child{ border-bottom:none; }
.member-name{ color:var(--ink); font-weight:500; }
.member-house{
  font-family:'DM Mono', monospace; color:var(--clay);
  font-size:12px; white-space:nowrap; margin-left:10px;
}
.team-card.empty{
  display:flex; align-items:center; justify-content:center;
  min-height:150px; opacity:0.5; border-style:dashed;
}

/* GENERATE CTA */
.generate-zone{
  text-align:center; margin-top:44px; padding-top:38px;
  border-top:1px dashed var(--line); display:none;
}
.generate-zone.show{ display:block; animation:fadeUp 0.6s ease both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
.generate-zone p{ font-size:14px; color:rgba(15,26,18,0.6); margin-bottom:16px; }
#generateBtn{ background:var(--moss-dark); color:var(--gold); box-shadow:0 10px 24px -8px rgba(36,61,41,0.5); }
#generateBtn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(36,61,41,0.6); }

/* BRACKET SECTION */
.bracket-section{
  display:none; margin-top:60px; padding-top:44px;
  border-top:2px solid var(--moss-dark);
}
.bracket-section.show{ display:block; animation:fadeUp 0.7s ease both; }
.bracket-header{ text-align:center; margin-bottom:40px; }
.bracket-header .eyebrow{ color:var(--clay); }
.bracket-header h2{
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(26px, 5vw, 40px);
  text-transform:uppercase; color:var(--moss-dark); letter-spacing:-0.01em;
}
.groups-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:44px; }
@media (max-width:720px){ .groups-grid{ grid-template-columns:1fr; } }
.group-block{ background:var(--paper); border-radius:16px; padding:22px; border:1px solid var(--line); }
.group-title{
  font-family:'Archivo Black', sans-serif; font-size:17px;
  text-transform:uppercase; color:var(--moss-dark); margin-bottom:4px;
  display:flex; align-items:center; gap:8px;
}
.group-title .tag-dot{ width:10px;height:10px; border-radius:50%; background:var(--clay); display:inline-block; }
.group-title.groupB .tag-dot{ background:var(--moss); }
.group-sub{
  font-family:'DM Mono', monospace; font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(15,26,18,0.45); margin-bottom:16px;
}
.standings{ width:100%; border-collapse:collapse; margin-bottom:18px; }
.standings th{
  font-family:'DM Mono', monospace; font-size:10px;
  letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(15,26,18,0.45); text-align:left; padding:0 8px 8px;
  border-bottom:1px solid var(--line);
}
.standings th.num, .standings td.num{ text-align:center; }
.standings td{ padding:9px 8px; font-size:13.5px; border-bottom:1px solid rgba(15,26,18,0.06); }
.standings tr.rank1 .pos-badge{ background:var(--gold); color:var(--moss-dark); }
.standings tr.rank2 .pos-badge{ background:rgba(58,90,64,0.18); color:var(--moss-dark); }
.pos-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px;height:20px; border-radius:50%; font-size:11px; font-weight:700;
  background:rgba(15,26,18,0.08); color:rgba(15,26,18,0.5); margin-right:8px;
}
.standings .team-cell{ display:flex; align-items:center; }
.standings .team-emoji{ margin-right:6px; }
.matches-title{
  font-family:'DM Mono', monospace; font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(15,26,18,0.5); margin:18px 0 10px;
  padding-top:14px; border-top:1px dashed var(--line);
}
.match-row{
  display:flex; align-items:center; gap:10px; padding:10px 4px;
  border-bottom:1px solid rgba(15,26,18,0.06);
}
.match-row:last-child{ border-bottom:none; }
.match-team{ flex:1; font-size:13px; font-weight:500; display:flex; align-items:center; gap:6px; min-width:0; }
.match-team.right{ justify-content:flex-end; text-align:right; }
.match-team span.tname{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.score-input{
  width:38px; text-align:center; font-family:'DM Mono', monospace; font-size:14px;
  padding:6px 2px; border-radius:8px; border:1.5px solid var(--line);
  background:var(--canvas); color:var(--ink);
}
.score-input:disabled{ opacity:0.75; background:transparent; border-color:transparent; }
.score-input:focus{ outline:none; border-color:var(--clay); }
.score-vs{ font-family:'DM Mono', monospace; font-size:11px; color:rgba(15,26,18,0.35); flex-shrink:0; }
.score-display{
  font-family:'DM Mono', monospace; font-size:15px; font-weight:500;
  color:var(--moss-dark); min-width:38px; text-align:center;
}

/* SEMIFINAL / FINAL */
.semi-heading{ text-align:center; margin-bottom:22px; }
.semi-heading .eyebrow{ color:var(--moss); }
.semi-heading h3{
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(20px, 4vw, 28px);
  text-transform:uppercase; color:var(--moss-dark);
}
.semi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:50px; }
@media (max-width:720px){ .semi-grid{ grid-template-columns:1fr; } }
.semi-card{
  background:var(--moss-dark); border-radius:16px; padding:24px;
  text-align:center; position:relative; overflow:hidden;
}
.semi-card::before{
  content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 22px);
  pointer-events:none;
}
.semi-label{
  font-family:'DM Mono', monospace; font-size:10px;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold); opacity:0.8; margin-bottom:14px;
}
.semi-slot{ display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 0; }
.semi-slot .emoji{ font-size:24px; }
.semi-slot .name{
  font-family:'Archivo Black', sans-serif; font-size:18px;
  color:var(--paper); text-transform:uppercase;
}
.semi-slot .empty-text{
  font-family:'DM Mono', monospace; font-size:12px;
  color:rgba(233,226,208,0.35); letter-spacing:0.05em;
}
.semi-vs{ font-family:'DM Mono', monospace; font-size:11px; color:var(--clay); letter-spacing:0.15em; margin:2px 0; }
.semi-origin{
  font-family:'DM Mono', monospace; font-size:9px;
  letter-spacing:0.1em; color:rgba(233,226,208,0.45);
  text-transform:uppercase; margin-top:2px;
}
.semi-score-row{
  display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px;
}

/* FINAL card, bigger/gold accent */
.final-wrap{ margin-bottom:20px; }
.final-card{
  background:linear-gradient(180deg, var(--moss-dark), #1a2e1e);
  border-radius:20px; padding:32px 24px;
  text-align:center; position:relative; overflow:hidden;
  border:2px solid var(--gold);
}
.final-card::before{
  content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(90deg, rgba(212,162,76,0.05) 0px, rgba(212,162,76,0.05) 1px, transparent 1px, transparent 22px);
  pointer-events:none;
}
.final-label{
  font-family:'DM Mono', monospace; font-size:11px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px;
}
.final-teams{
  display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap;
}
.final-slot{ display:flex; flex-direction:column; align-items:center; gap:8px; min-width:120px; }
.final-slot .emoji{ font-size:44px; }
.final-slot .name{
  font-family:'Archivo Black', sans-serif; font-size:22px;
  color:var(--paper); text-transform:uppercase;
}
.final-vs{
  font-family:'Archivo Black', sans-serif; font-size:20px;
  color:var(--clay);
}
.final-score-row{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:24px; }

/* CHAMPION OVERLAY */
.champion-overlay{
  display:none;
  position:fixed; inset:0;
  z-index:100;
  background:radial-gradient(circle at 50% 40%, rgba(212,162,76,0.25), rgba(15,26,18,0.94) 70%);
  align-items:center; justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:24px;
}
.champion-overlay.show{ display:flex; animation:overlayIn 0.5s ease both; }
@keyframes overlayIn{ from{ opacity:0; } to{ opacity:1; } }
.champion-eyebrow{
  font-family:'DM Mono', monospace; font-size:13px;
  letter-spacing:0.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:20px;
  opacity:0; animation:fadeInSimple 0.6s ease 0.3s both;
}
@keyframes fadeInSimple{ from{ opacity:0; } to{ opacity:0.9; } }
.champion-emoji{
  font-size:110px;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,0.4));
  transform:scale(0.2); opacity:0;
  animation: championZoom 1.1s cubic-bezier(.16,1.4,.35,1) 0.15s both;
}
@keyframes championZoom{
  0%{ transform:scale(0.2) rotate(-15deg); opacity:0; }
  55%{ transform:scale(1.25) rotate(6deg); opacity:1; }
  75%{ transform:scale(0.95) rotate(-2deg); }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}
.champion-word{
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(40px, 10vw, 90px);
  color:var(--gold);
  letter-spacing:0.02em;
  margin-top:10px;
  opacity:0;
  animation: championWordIn 0.8s ease 0.9s both;
  text-shadow:0 8px 30px rgba(212,162,76,0.4);
}
@keyframes championWordIn{
  from{ opacity:0; transform:translateY(20px) scale(0.9); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.champion-name{
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(26px, 6vw, 46px);
  color:var(--paper);
  text-transform:uppercase;
  margin-top:16px;
  opacity:0;
  animation: fadeInSimple 0.7s ease 1.3s both;
}
.champion-sub{
  font-family:'DM Mono', monospace;
  font-size:13px;
  letter-spacing:0.12em;
  color:rgba(233,226,208,0.6);
  margin-top:10px;
  opacity:0;
  animation: fadeInSimple 0.7s ease 1.5s both;
}
.confetti-piece{
  position:absolute;
  top:-20px;
  width:9px; height:14px;
  opacity:0.9;
  animation-name: confettiFall;
  animation-timing-function: linear;
  animation-iteration-count:1;
}
@keyframes confettiFall{
  from{ transform:translateY(0) rotate(0deg); opacity:1; }
  to{ transform:translateY(110vh) rotate(540deg); opacity:0.4; }
}
.champion-close{
  margin-top:34px;
  opacity:0;
  animation: fadeInSimple 0.7s ease 1.8s both;
}

footer{
  text-align:center; margin-top:52px;
  font-family:'DM Mono', monospace; font-size:11px;
  letter-spacing:0.1em; color:rgba(15,26,18,0.35);
  text-transform:uppercase;
}

.status-banner{
  text-align:center;
  font-family:'DM Mono', monospace;
  font-size:12.5px;
  color:var(--danger);
  margin-bottom:16px;
  min-height:18px;
}

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