/* Styles for "Will Magnath win Cobble's money?" */
:root {
  --bg: #0f1724;
  --card: #0b1220;
  --accent: #ffcc00;
  --muted: #94a3b8;
  --success: #16a34a;
  --danger: #ef4444;
  --glass: rgba(255,255,255,0.03);
}
html,body{
  height:100%;
  margin:0;
  font-family:Inter,Segoe UI,Roboto,system-ui,-apple-system,"Helvetica Neue",Arial;
  background: linear-gradient(180deg,#071026 0%, #0c1530 100%);
  color:#e6eef8;
}
.container{
  max-width:820px;
  margin:36px auto;
  padding:24px;
}
h1{
  margin:0 0 6px 0;
  font-size:28px;
}
.subtitle{
  color:var(--muted);
  margin-top:0;
  margin-bottom:18px;
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);
  padding:16px;
  border-radius:10px;
  margin-bottom:16px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.6);
}
#mmr-value{
  font-weight:700;
  font-size:28px;
  margin:8px 0;
}
.progress{
  background:var(--glass);
  height:14px;
  border-radius:8px;
  overflow:hidden;
}
.progress-bar{
  height:100%;
  background:linear-gradient(90deg,var(--accent), #ff9f1c);
  width:0%;
  transition:width 800ms ease;
}
.details{
  color:var(--muted);
  margin-top:8px;
}
.time-visual{
  display:flex;
  align-items:center;
  gap:12px;
}
#countdown{
  font-weight:600;
  color:#f0f6ff;
}
svg .ring-bg{
  fill:none;
  stroke:#0f1724;
  stroke-width:8;
  opacity:0.6;
}
svg .ring-fg{
  fill:none;
  stroke:var(--accent);
  stroke-width:8;
  transform-origin:50% 50%;
  transform:rotate(-90deg);
  transition:stroke-dashoffset 700ms linear;
}
.status{
  margin:14px 0;
  padding:12px;
  border-radius:8px;
  font-weight:700;
  text-align:center;
}
.status.ok{ background:rgba(22,163,74,0.12); color:var(--success); border:1px solid rgba(22,163,74,0.15)}
.status.warn{ background:rgba(255,204,0,0.06); color:var(--accent); border:1px solid rgba(255,204,0,0.08)}
.status.bad{ background:rgba(239,68,68,0.06); color:var(--danger); border:1px solid rgba(239,68,68,0.08)}
footer{
  margin-top:18px;
  color:var(--muted);
  font-size:13px;
}
a{ color:var(--accent); text-decoration:none }
@media (max-width:640px){
  .container{ padding:14px }
  #mmr-value{ font-size:22px }
}