/* Color Blink — scoped game UI */
.cb-shell{
  max-width: 420px;
  margin: 0 auto 28px;
}

.cb-hud{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
  margin-bottom:14px;
}
.cb-stat{
  background: rgba(255,255,255,.06);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  text-align:center;
}
.cb-stat .label{
  display:block;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
  margin-bottom:4px;
}
.cb-stat .value{
  font-size:20px;
  font-weight:800;
  font-variant-numeric: tabular-nums;
}

.cb-stage{
  position:relative;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  padding:22px 18px 18px;
  box-shadow: var(--shadow);
}
.cb-status{
  text-align:center;
  font-weight:800;
  font-size:15px;
  margin-bottom:16px;
  min-height:1.4em;
  color:var(--muted);
}
.cb-status.is-active{ color:var(--text); }

.cb-pad{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  max-width:280px;
  margin:0 auto;
}
.cb-btn{
  appearance:none;
  aspect-ratio:1;
  border:0;
  border-radius:22px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  box-shadow:
    inset 0 -6px 12px rgba(0,0,0,.25),
    inset 0 4px 8px rgba(255,255,255,.22),
    0 8px 20px rgba(0,0,0,.25);
  transition: transform .08s ease, filter .08s ease;
}
.cb-btn:disabled{
  cursor:default;
  opacity:.72;
}
.cb-btn:not(:disabled):active{
  transform: scale(.96);
}
.cb-btn[data-color="0"]{ background: linear-gradient(145deg, #fb7185, #e11d48); }
.cb-btn[data-color="1"]{ background: linear-gradient(145deg, #4ade80, #16a34a); }
.cb-btn[data-color="2"]{ background: linear-gradient(145deg, #60a5fa, #2563eb); }
.cb-btn[data-color="3"]{ background: linear-gradient(145deg, #fde047, #ca8a04); }

.cb-btn.is-lit{
  filter: brightness(1.55);
  transform: scale(1.04);
  box-shadow:
    inset 0 -2px 6px rgba(0,0,0,.15),
    inset 0 6px 12px rgba(255,255,255,.45),
    0 0 28px rgba(255,255,255,.35);
}
.cb-btn.is-wrong{
  animation: cb-shake .35s ease;
  filter: brightness(.7) saturate(.5);
}

@keyframes cb-shake{
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(-6px); }
  75%{ transform: translateX(6px); }
}

.cb-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background: rgba(7,10,18,.62);
  border-radius:24px;
  padding:20px;
  z-index:2;
}
.cb-overlay[hidden]{ display:none !important; }
.cb-overlay-card{
  width:min(100%, 300px);
  text-align:center;
  background: rgba(12,18,40,.95);
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  padding:22px 18px;
  box-shadow: var(--shadow);
}
.cb-overlay-card h2{
  margin:0 0 8px;
  font-size:22px;
}
.cb-overlay-card p{
  margin:0 0 16px;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.cb-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
  justify-content:center;
}

.cb-shell.is-busy .cb-btn{ pointer-events:none; }

@media (max-width: 420px){
  .cb-pad{ gap:10px; max-width:240px; }
  .cb-btn{ border-radius:18px; }
  .cb-hud{ grid-template-columns: 1fr 1fr; }
  .cb-stat:last-child{ grid-column: 1 / -1; }
}