:root{
  --bg:#08101f;
  --panel:#111a2d;
  --panel2:#0d1627;
  --line:#26324a;
  --text:#f7f9fd;
  --muted:#9aa8bc;
  --ring:#6f9cff;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text)}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 0%,rgba(111,156,255,.14),transparent 30%),
    radial-gradient(circle at 90% 5%,rgba(139,112,255,.10),transparent 28%),
    linear-gradient(180deg,#09111f,#07101c);
}
.screen{
  min-height:100vh;
  max-width:1500px;
  margin:0 auto;
  padding:clamp(22px,3vw,46px);
  display:flex;
  flex-direction:column;
  gap:clamp(24px,3vw,42px);
}
.countdown{
  width:min(520px,100%);
  margin:0 auto;
  text-align:center;
  padding:10px 0 2px;
}
.countdown span{
  display:block;
  color:var(--muted);
  font-size:clamp(1rem,1.8vw,1.25rem);
  margin-bottom:4px;
}
.countdown strong{
  display:inline-block;
  font-size:clamp(4.8rem,11vw,9rem);
  line-height:.95;
  letter-spacing:-.06em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 30px rgba(111,156,255,.16);
}
.countdown b{
  display:block;
  font-size:clamp(1.2rem,2vw,1.7rem);
  margin-top:6px;
}
.countdown small{
  display:block;
  color:var(--muted);
  margin-top:5px;
  font-size:.95rem;
}
.topic-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px);
  align-items:stretch;
}
.topic-card{
  min-height:250px;
  padding:24px 18px 20px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(18,29,50,.94),rgba(11,19,34,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 16px 38px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  cursor:pointer;
  user-select:none;
  transition:transform .18s ease,border-color .18s ease;
}
@media(hover:hover){
  .topic-card:hover{transform:translateY(-2px);border-color:rgba(111,156,255,.24)}
}
.ring{
  --p:0;
  width:clamp(132px,12vw,176px);
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at center,var(--panel2) 0 59%,transparent 60%),
    conic-gradient(var(--ring) calc(var(--p)*1%),#273249 0);
  display:grid;
  place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 0 28px rgba(111,156,255,.08);
}
.ring-value{
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:900;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.topic-name{
  text-align:center;
  font-size:clamp(1rem,1.6vw,1.2rem);
  font-weight:800;
  line-height:1.35;
}
.topic-sub{
  color:var(--muted);
  font-size:.82rem;
  margin-top:-10px;
}
@media(max-width:1050px){
  .topic-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topic-card{min-height:220px}
}
@media(max-width:430px){
  .screen{padding:20px 14px 30px}
  .topic-grid{grid-template-columns:1fr 1fr;gap:10px}
  .topic-card{min-height:190px;padding:18px 10px;border-radius:18px}
  .ring{width:118px}
  .topic-name{font-size:.92rem}
}
@media(min-width:1600px){
  .topic-card{min-height:285px}
}