*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  background: radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.10), transparent 60%),
              radial-gradient(900px 500px at 120% 20%, rgba(255,255,255,.06), transparent 60%),
              var(--bg);
  color:var(--ink);
}
a{ color:inherit; text-decoration:none; }

.shell{
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}
.center{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card{
  width:100%;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%), var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  padding: var(--pad2);
  box-shadow: var(--shadow);
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 8px 2px 14px 2px;
}
.brandLeft{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.pill{display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted); font-family: var(--fontMeta);}
.logo{
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  object-fit: cover;
}
.badge{
  height: 26px;
  width: auto;
  opacity: .95;
}
.h1{margin: 6px 0 6px 0; font-size: 34px; line-height:1.05; letter-spacing:.2px; font-family: var(--fontDisplay);}
.h2{margin: 0; font-size: 20px; line-height:1.2; font-family: var(--fontDisplay); letter-spacing:.4px;}
.kicker{font-size: 12px; letter-spacing: .18em; text-transform:uppercase; color: var(--muted); font-family: var(--fontMeta);}
.muted{ color: var(--muted); }
.faint{ color: var(--faint); }
hr.line{
  border:0;
  height:1px;
  background: var(--line);
  margin: 14px 0;
}
.row{ display:flex; align-items:center; }
.col{ display:flex; flex-direction:column; }
.wrap{ flex-wrap:wrap; }
.grow{ flex:1; min-width:0; }
.gap-8{ gap:8px; }
.gap-10{ gap:10px; }
.gap-12{ gap:12px; }
.gap-16{ gap:16px; }
.spacer-8{ height:8px; }
.spacer-12{ height:12px; }
.spacer-16{ height:16px; }
.spacer-20{ height:20px; }
.spacer-24{ height:24px; }

.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  cursor:pointer;
  user-select:none;
  font-weight: 700;
  letter-spacing:.2px;
  transition: transform .06s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{ background: rgba(255,255,255,.09); }
.btn:active{ transform: translateY(1px); }
.btn.primary{
  background: rgba(255,255,255,.14);
}
.btn.primary:hover{
  background: rgba(255,255,255,.18);
}
.btn.small{
  width:auto;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px;
}
.btn.ghost{
  background: transparent;
}
.btn.danger{
  border-color: rgba(255,59,48,.35);
  background: rgba(255,59,48,.10);
}
.btnIcon img{
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: invert(1);
  opacity: .95;
}

.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media (min-width: 680px){
  .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.modeCard{
  position:relative;
  padding: 14px 14px 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  cursor:pointer;
  transition: transform .06s ease, background .12s ease;
  min-height: 96px;
}
.modeCard:hover{ background: rgba(255,255,255,.08); }
.modeCard:active{ transform: translateY(1px); }
.modeCard .tag{ font-size: 13px; color: var(--muted); margin-top:4px; }
.modeCard .title{ font-size: 18px; font-weight: 900; margin-top: 2px; font-family: var(--fontDisplay);} 
.modeIcon{
  width: 56px; height:56px; border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  display:flex; align-items:center; justify-content:center;
}
.modeIcon img{ width: 40px; height:40px; object-fit:contain; filter: invert(1); opacity:.95; }
.corner{
  position:absolute; right:10px; top:10px;
  width: 18px; height:18px;
  filter: invert(1);
  opacity: .75;
}

.bigCard{
  border-radius: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 45%), var(--card2);
  padding: 18px;
}
.message{
  font-size: 22px;
  line-height: 1.18;
  font-weight: 850;
  letter-spacing:.2px;
}
.goal{
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
}
.choice{
  text-align:left;
  justify-content:flex-start;
  padding: 14px 14px;
  border-radius: 18px;
  font-weight: 800;
}
.choice .badgeLetter{
  width: 28px; height: 28px; border-radius: 10px;
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--mono);
  font-size: 14px;
  background: rgba(255,255,255,.05);
}
.choice .ctext{
  font-size: 15px;
  line-height: 1.15;
}
.choice .sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 650;
}

.timerWrap{
  display:flex; align-items:center; gap:10px;
}
.timer{
  width: 44px; height: 44px; border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 900;
}
.timer.pulse{
  animation: pulse .55s ease-in-out infinite;
}
@keyframes pulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.04); }
  100%{ transform: scale(1); }
}
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(20,24,28,.92);
  color: var(--ink);
  font-weight: 800;
  font-size: 13px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}
.verdictRow{
  display:flex;
  gap: 14px;
  align-items:flex-start;
}
.judge{
  width: 120px;
  height: 120px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  object-fit: cover;
}
.progressRow{
  display:flex; flex-direction:column; gap: 10px;
}
.bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  overflow:hidden;
}
.bar > div{
  height:100%;
  width: 0%;
  background: rgba(255,255,255,.55);
}
.scoreHero{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.scoreNum{
  font-size: 66px;
  font-weight: 950;
  letter-spacing:-1px;
}
.smallLabel{font-size: 12px;
  letter-spacing:.16em;
  text-transform: uppercase;
  color: var(--muted); font-family: var(--fontMeta);}
.kv{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}
.kv b{ color: var(--ink); }

.monoBox{
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  padding: 12px;
  font-family: var(--mono);
  font-size: 13px;
  color: rgba(242,245,247,.92);
  white-space: pre-wrap;
}