/* ===== GLOBAL ===== */
*{box-sizing:border-box}
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  font-family:"Segoe UI", sans-serif;
  transition:0.3s;
}

/* ===== BACKGROUND THEME ===== */
body.light{
  background:linear-gradient(135deg,#cfe4ff,#e8f4ff);
  color:#0b2545;
}
body.dark{
  background:linear-gradient(135deg,#08060a,#140b0b);
  color:#ffffff;
}

/* ===== THEME TOGGLE ===== */
.theme-toggle{
  position:fixed;
  top:20px;
  right:20px;
  width:55px;
  height:55px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  font-size:22px;
  background:#ffffffaa;
  backdrop-filter:blur(4px);
}
body.dark .theme-toggle{
  background:#2a0a0aaa;
}

/* ===== PANEL ===== */
.panel {
  width: 90%;
  max-width: 500px;      /* desktop */
  min-width: 280px;      /* mobile nhỏ vẫn vừa */
  padding: clamp(12px, 4vw, 32px);  /* tự co padding vừa mắt */
  border-radius: 20px;
  text-align: center;

  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
}

/* ===== TITLE ===== */
.title {
  font-size: clamp(18px, 5vw, 26px); /* co giãn vừa PC và mobile */
  font-weight: 800;
  margin-bottom: clamp(12px, 4vw, 20px);
  text-shadow: 0 0 12px rgba(0,140,255,0.6);
}
body.dark .title {
  text-shadow: 0 0 18px rgba(255,0,0,0.9);
}

/* ===== BUTTONS ===== */
.buttons {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 3vw, 14px);
}

.btn {
  padding: clamp(8px, 3vw, 16px);
  font-size: clamp(14px, 4vw, 18px);
  font-weight: 700;
  border: none;
  border-radius: clamp(10px, 3vw, 14px);
  cursor: pointer;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
  color: white;
  transition: 0.2s;
}
.btn:hover {
  transform: scale(1.05);
  background: rgba(255,0,0,0.4);
}

/* ===== CURSED BORDER ===== */
.cursed-border {
  position: absolute;
  inset: -20px;
  border-radius: 30px;
  pointer-events: none;
  box-shadow: 0 0 40px rgba(0,140,255,0.6),
              inset 0 0 60px rgba(0,140,255,0.4);
  animation: curseFlow 3s infinite ease-in-out;
}
body.dark .cursed-border {
  box-shadow: 0 0 60px rgba(255,0,0,0.45),
              inset 0 0 100px rgba(0,0,0,0.9);
  filter: brightness(1.5);
}

/* ===== THEME TOGGLE ===== */
.theme-toggle {
  width: clamp(40px, 5vw, 55px);
  height: clamp(40px, 5vw, 55px);
  font-size: clamp(18px, 4vw, 22px);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: #ffffffaa;
  backdrop-filter: blur(4px);
}
body.dark .theme-toggle {
  background: #2a0a0aaa;
}