/* Minimal, responsive, clean look */
* { box-sizing: border-box; }
:root {
  --bg: #0f0f11;
  --card: #16181d;
  --muted: #8b95a7;
  --text: #e7e9ee;
  --brand: #d1252c;
  --ok: #10b981;
  --ring: #da1e1efd;

  /* mobile: JS sẽ set lại theo kích thước bánh */
  --spin-size: 200px;
}
html, body { height: 100%; }
body {
  margin: 0;
  background: url("imgs/bg.webp");
  background-size: cover;       /* Ảnh phủ kín toàn trang */
  background-position: center;  /* Căn giữa ảnh */
  background-attachment: fixed; /* Giữ ảnh cố định khi scroll */
  background-repeat: no-repeat; /* Không lặp lại ảnh */
  color: var(--text);
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
}

.container { max-width: 1100px; margin: 32px auto; padding: 0 16px; }
h1 {
  margin: 0 0 16px;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 32px;
  color: #fcfcfc;
  text-align: center;

  /* Neon viền sáng */
  text-shadow:
    0 0 5px #fc0c0c,
    0 0 10px #ff3c0b,
    0 0 20px #ff3c0b,
    0 0 40px #ff3c0b,
    0 0 80px #ff3c0b;

  animation: neon-flicker 1.8s infinite alternate;
}


@media (max-width: 960px){ .board{ grid-template-columns: 1fr; } }

.wheel-wrap {
  position: relative;
  background: rgba(0, 0, 0, 0.4); 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px;
  padding: 24px;
  display: flex;              /* Dùng flex thay vì grid */
  justify-content: center;    /* Căn giữa ngang */
  align-items: center;        /* Căn giữa dọc */
  box-shadow: 0 20px 50px #42424073, inset 0 1px 0 rgba(255,255,255,.04);
  min-height: 520px;
  overflow: hidden;           /* Chặn vòng quay tràn ra ngoài */
}

.wheel {
  width: 100%;                /* Chiếm tối đa wrap */
  max-width: 560px;           /* Giữ kích thước tối đa */
  aspect-ratio: 1/1;
  object-fit: contain;
  will-change: transform;
  transition: transform 0s;
  transform: rotate(0deg);
  filter: drop-shadow(0 8px 28px rgba(255, 234, 113, 0.35));
}


.pointer {
  position: absolute;
  top: 18px;
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 26px solid var(--ring);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.5));
}

.spin-btn {
  position: absolute;
  width: var(--spin-size);
  height: var(--spin-size);
  border: none;
  background: url('imgs/start.png') center/cover no-repeat;
  cursor: pointer;
  border-radius: 50%;
  animation: pulse 0.8s ease-in-out infinite;
  animation-play-state: paused;
}
.spin-btn.ready { animation-play-state: running; }
.spin-btn:active { transform: scale(.98); }
@keyframes pulse { 0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1)} }

.sidebar {
  background: rgba(0, 0, 0, 0.4);      /* nền trong suốt tối */
  backdrop-filter: blur(12px);         /* làm mờ nền phía sau */
  -webkit-backdrop-filter: blur(12px); /* hỗ trợ Safari */
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  display: flex; 
  flex-direction: column; 
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15); /* thêm viền nhẹ kiểu glass */
}
.stat { display:flex; align-items:center; justify-content:space-between; background:#0f1217; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.06) }
.stat strong { background: rgba(248,210,74,.18); color: #ffe28c; padding:6px 10px; border-radius:999px; font-weight:800; letter-spacing:.3px; }
.actions { display:grid; grid-template-columns: repeat(3,1fr); gap:8px; }
.btn { border:1px solid rgba(255,255,255,.08); background:#11141a; color:var(--text); padding:10px 12px; border-radius:10px; cursor:pointer; }
.btn:hover{ background:#0c0f14; }
.btn-ghost{ background:transparent; }

.log { border:1px dashed rgba(255,255,255,.12); border-radius:12px; padding:10px; }
.log h3 { margin:0 0 6px; font-size:13px; color:var(--muted); }
.log ul { margin:0; padding-left:16px; max-height:240px; overflow:auto; }
.log li { margin:4px 0; color:#cdd6e5; }

.helper { margin-top:18px; color:var(--muted); }

/* ===== Mobile tweaks ===== */
@media (max-width: 1024px){
  .container{ margin: 16px auto; }
  .board{ gap: 14px; }
}
@media (max-width: 820px){
  .board{ grid-template-columns: 1fr; }
  .wheel-wrap{ min-height: auto; padding: 16px; }
  .sidebar{ order: 2; }
}
@media (max-width: 480px){
  h1{ font-size: 22px; }
  .spin-btn{ animation: pulse 1s ease-in-out infinite; }
  .stat strong{ font-size: 13px; }
  .btn{ padding: 12px; font-size: 14px; }
  .log ul{ max-height: 180px; }
  .pointer{ top: 10px; border-left-width: 10px; border-right-width: 10px; border-bottom-width: 20px; }
}
/* ===== Popup đẹp (modal + toast) ===== */
.popup-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: grid; place-items: center;
  z-index: 9999;
  animation: popFadeIn .18s ease-out both;
}
@keyframes popFadeIn { from{opacity:0} to{opacity:1} }

.popup {
  width: min(92vw, 440px);
  background: var(--card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
  overflow: hidden;
  animation: popIn .18s ease-out both;
}
@keyframes popIn {
  from { transform: translateY(8px) scale(.98); opacity: .6; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.popup-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.popup-head .icon {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-weight: 900;
}
.popup-head .title { font-weight: 800; letter-spacing: .2px; }

.popup-body { padding: 14px 16px; color: #cfd7e6; }
.popup-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 12px 16px 16px; 
}
.popup-btn {
  border: 1px solid rgba(255,255,255,.08);
  background: #11141a;
  color: var(--text);
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
}
.popup-btn.primary { background: #1a2130; border-color: rgba(255,255,255,.16); }
.popup-btn:hover { background: #0c0f14; }

/* Màu theo loại thông báo */
.icon.win { background: rgba(25, 179, 148, .25); }
.icon.info{ background: rgba(120, 162, 255, .25); }
.icon.fail{ background: rgba(235, 87, 87, .25); }

/* Toast nhỏ (khi muốn auto-close, không cần nút) */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: #11141a; color: var(--text);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  z-index: 9999;
  animation: toastIn .18s ease-out, toastOut .18s ease-in 2.2s forwards;
}
@keyframes toastIn { from{opacity:0; transform: translate(-50%, 8px);} to{opacity:1; transform: translate(-50%, 0);} }
@keyframes toastOut { to{opacity:0; transform: translate(-50%, 6px);} }
/* Style cho các input trong registerBox */
#registerBox input {
  display: block;  
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: all 0.25s ease;
}

#registerBox input::placeholder {
  color: rgba(255,255,255,0.6);
}

/* Khi focus vào input */
#registerBox input:focus {
  border-color: #ff4d6d;
  box-shadow: 0 0 8px rgba(255, 77, 109, 0.6);
  background: rgba(255,255,255,0.15);
}

/* Style cho nút Nhận 1 lượt quay */
#registerBox button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, #ff4d6d, #ff914d);
  transition: all 0.25s ease;
}

#registerBox button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 77, 109, 0.5);
}
#registerBox input,
#registerBox button {
  display: block;   /* mỗi thằng 1 dòng */
  width: 100%;      /* full chiều ngang */
  margin-bottom: 10px;
}
.helper {
  margin-top: 18px;
  color: #fcfbfb;  /* chữ trắng */
  font-size: 13px;
  text-align: center; /* nếu muốn căn giữa */
}

.home-btn {
  display: block;
  width: 100%;
  padding: 12px;
  text-align: center;
 background: linear-gradient(135deg, #08b1ff, #082aee);
  color: #f3f0f0;
  font-weight: bold;
  font-size: 15px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.25s ease;
  margin-top: 12px;
}

.home-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 114, 255, 0.5);
}

/* Nút Ủng hộ đỏ Highlands */
.popup-btn.secondary {
  background: #d32f2f;       /* đỏ đậm */
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  margin-left: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px rgba(211, 47, 47, 0.6);
}

/* Hiệu ứng sáng khi hover */
.popup-btn.secondary:hover {
  background: #f44336;       /* đỏ tươi hơn */
  box-shadow: 0 0 15px rgba(244, 67, 54, 0.9);
  transform: scale(1.05);
}