:root{
  --navy:#0b2545;
  --red:#c8102e;
  --gold:#f4b942;
  --green:#1e824c;
  --grey:#e7e9ec;
  --dead:#c9ccd1;
  --text:#1c1c1c;
}
*{box-sizing:border-box;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:#f6f7f9;
  color:var(--text);
  margin:0;
  padding:24px 12px 60px;
}
.wrap{max-width:760px;margin:0 auto;}
h1{
  color:var(--navy);
  font-size:1.6rem;
  text-align:center;
  margin-bottom:4px;
}
.banner-img{
  display:block;
  width:100%;
  max-width:420px;
  margin:0 auto 14px;
  border-radius:14px;
  box-shadow:0 4px 16px rgba(0,0,0,0.25);
}
.subtitle{
  text-align:center;
  color:#555;
  margin-bottom:20px;
  font-size:0.95rem;
}
.status-bar{
  text-align:center;
  background:#fff;
  border:1px solid var(--grey);
  border-radius:10px;
  padding:10px 14px;
  margin-bottom:18px;
  font-size:0.9rem;
}
.board-wrap{
  max-width:620px;
  margin:0 auto;
}
.frame-top, .frame-bottom{
  width:100%;
  display:block;
}
.board-middle{
  display:flex;
  width:100%;
}
.frame-side{
  height:100%;
  object-fit:cover;
  display:block;
  flex-shrink:0;
}
.frame-left{ width:9.97%; }
.frame-right{ width:13.08%; }
.grid-slot{
  flex:1 1 76.95%;
  display:flex;
}
.grid-outer{
  display:grid;
  grid-template-columns:0.9fr repeat(6,1fr);
  grid-template-rows:0.9fr repeat(6,1fr);
  gap:3px;
  background:var(--navy);
  padding:4px;
  width:100%;
  aspect-ratio:965/730;
  box-sizing:border-box;
}
.cell{
  width:100%;
  height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(0.5rem, 2.6vw, 0.72rem);
  font-weight:700;
  text-align:center;
  border-radius:3px;
  background:#fff;
  cursor:pointer;
  padding:2px;
  line-height:1.05;
  overflow:hidden;
  overflow-wrap:normal;
  word-break:normal;
  user-select:none;
}
.cell.header{
  background:var(--navy);
  color:#fff;
  cursor:default;
  font-size:0.75rem;
}
.cell.corner{
  background:var(--navy);
  cursor:default;
}
.cell.taken{
  background:var(--grey);
  cursor:default;
  color:#333;
}
.cell.open:hover{
  background:var(--gold);
}
.cell.dead{
  background:var(--red) !important;
  color:#fff !important;
  cursor:default;
}
.cell.dead-square{
  background:var(--red) !important;
  color:#fff !important;
  cursor:default;
}
.cell.matchup{
  background:var(--gold) !important;
  color:var(--navy) !important;
  animation:pulse 1.4s infinite;
}
.cell.champion{
  background:var(--green) !important;
  color:#fff !important;
  font-weight:800;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(244,185,66,0.7);}
  70%{box-shadow:0 0 0 8px rgba(244,185,66,0);}
  100%{box-shadow:0 0 0 0 rgba(244,185,66,0);}
}
.legend{
  display:flex;gap:14px;flex-wrap:wrap;
  justify-content:center;
  margin:16px 0;
  font-size:0.8rem;
}
.legend span{display:flex;align-items:center;gap:6px;}
.swatch{width:14px;height:14px;border-radius:3px;display:inline-block;}
.pay-box{
  background:#fff;
  border:1px solid var(--grey);
  border-radius:10px;
  padding:14px 16px;
  margin-top:22px;
  font-size:0.9rem;
}
.pay-box h3{margin-top:0;color:var(--navy);}
button{
  font-family:inherit;
  cursor:pointer;
}
.btn{
  background:var(--navy);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:10px 16px;
  font-size:0.9rem;
  font-weight:600;
}
.btn.danger{background:var(--red);}
.btn.secondary{background:#556;}
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.45);
  display:flex;align-items:center;justify-content:center;
  z-index:50;
}
.modal{
  background:#fff;border-radius:12px;padding:22px;
  width:90%;max-width:340px;
}
.modal input[type=text]{
  width:100%;padding:10px;font-size:1rem;
  border:1px solid #ccc;border-radius:8px;margin:10px 0 16px;
}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;}
.hidden{display:none !important;}
.admin-section{
  background:#fff;border:1px solid var(--grey);border-radius:10px;
  padding:16px;margin-bottom:18px;
}
.admin-section h2{margin-top:0;font-size:1.05rem;color:var(--navy);}
.team-row{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.team-row input{
  width:70px;padding:8px;text-align:center;text-transform:uppercase;
  border:1px solid #ccc;border-radius:6px;
}
label.check-row{
  display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:0.9rem;
}

.cell.one-team{ background:var(--gold) !important; color:var(--navy) !important; }
.cell.champion{ background:var(--green) !important; color:#fff !important; font-weight:800; }

.cell.half-dead{ background:linear-gradient(135deg, var(--red) 50%, var(--grey) 50%) !important; color:#1c1c1c !important; text-shadow:0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; font-weight:700; }

.cell.one-team{ background:#a5e4f9 !important; color:var(--navy) !important; }
.cell.champion{ background:#00d632 !important; color:var(--navy) !important; font-weight:800; }