#wc-root {
  max-width:460px;
  margin:20px auto;
  padding:20px;
  border-radius:16px;
  text-align:center;
  background:#0f172a;
  color:#fff;
  position:relative;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  border:1px solid #25306e;
}
.wc-prompt {
  display:inline-block;
  margin:6px 0 12px;
  padding:8px 16px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.5px;
  color:#0f172a;
  background:linear-gradient(180deg,#ffffff,#eaf0ff);
  border:1px solid #b9c6ff;
}
.wc-timer-wrap { margin:10px 0; text-align:center; }
#wc-timer-text { font-weight:700; color:#fff; }
.wc-timer-bar { width:100%; height:12px; border-radius:8px; background:#2a3566; margin-top:6px; }
#wc-timer-bar-fill { height:100%; width:100%; background:linear-gradient(180deg,#ffffff,#e9efff); transition:width 1s linear; }
.wc-board { display:grid; grid-template-columns:repeat(4, 70px); gap:12px; justify-content:center; margin:10px 0; }
.wc-tile { width:70px; height:70px; border-radius:12px; background:#2b5fff; color:#fff; font-weight:900; font-size:28px; display:grid; place-items:center; cursor:pointer; }
.wc-tile.selected { background:#ff8f00; }
.wc-current { min-width:260px; min-height:50px; padding:10px; background:#fff; color:#0f172a; border-radius:12px; font-weight:900; }
.wc-actions { display:flex; gap:12px; justify-content:center; margin:10px 0; }
.wc-btn { padding:12px 20px; border-radius:12px; font-weight:900; cursor:pointer; }
.wc-btn-primary { background:#2b5fff; color:#fff; }
.wc-btn-ghost { background:#0d1550; color:#fff; }
.wc-btn-shuffle {
  background: linear-gradient(180deg, #142067, #0d1550);
  border: 1px solid #2a3ea3;
  color: #e7eeff;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.2),
              0 6px 12px rgba(0,0,0,.3),
              0 0 12px rgba(42,62,163,.6);
  backdrop-filter: blur(6px);
  transition: transform .1s, box-shadow .2s, background .2s;
}
.wc-btn-shuffle:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25),
              0 8px 16px rgba(0,0,0,.35),
              0 0 14px rgba(42,62,163,.8);
}
.wc-btn-shuffle:active {
  transform: translateY(1px) scale(.97);
}
.wc-score { margin-top:8px; font-weight:700; }
#wc-confetti { position:absolute; inset:0; pointer-events:none; }
.wc-toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#333; color:#fff; padding:8px 16px; border-radius:8px; opacity:0; transition:opacity .3s; }
.wc-toast.show { opacity:1; }
