* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #d4af37;
  --primary-dark: #b8941f;
  --secondary-color: #1a1a2e;
  --accent-color: #16213e;
  --gold-light: #f4d03f;
  --gold-glow: rgba(212, 175, 55, 0.5);
  --bg-color: #0f0f1e;
  --text-color: #1a1a2e;
  --text-light: #f5f5f5;
  --wheel-size: min(85vw, 500px);
  --pointer-size: 40px;
}

body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #0f0f1e 100%);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  min-height: 100vh;
  padding: 20px;
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(26, 26, 46, 0.3) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.stars::before,
.stars::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(212, 175, 55, 0.8);
  border-radius: 50%;
  box-shadow: 
    100px 200px rgba(212, 175, 55, 0.6),
    300px 100px rgba(212, 175, 55, 0.5),
    500px 300px rgba(212, 175, 55, 0.7),
    700px 150px rgba(212, 175, 55, 0.6),
    900px 250px rgba(212, 175, 55, 0.5),
    200px 400px rgba(212, 175, 55, 0.6),
    400px 500px rgba(212, 175, 55, 0.5),
    600px 450px rgba(212, 175, 55, 0.7),
    800px 350px rgba(212, 175, 55, 0.6),
    50px 50px rgba(212, 175, 55, 0.5),
    250px 550px rgba(212, 175, 55, 0.6),
    450px 600px rgba(212, 175, 55, 0.5);
  animation: twinkle 3s ease-in-out infinite;
}

.stars::after {
  animation-delay: 1.5s;
  box-shadow: 
    150px 250px rgba(212, 175, 55, 0.5),
    350px 150px rgba(212, 175, 55, 0.6),
    550px 350px rgba(212, 175, 55, 0.5),
    750px 200px rgba(212, 175, 55, 0.7),
    950px 300px rgba(212, 175, 55, 0.6),
    250px 450px rgba(212, 175, 55, 0.5),
    450px 550px rgba(212, 175, 55, 0.6),
    650px 500px rgba(212, 175, 55, 0.5),
    850px 400px rgba(212, 175, 55, 0.7),
    100px 100px rgba(212, 175, 55, 0.6),
    300px 600px rgba(212, 175, 55, 0.5),
    500px 650px rgba(212, 175, 55, 0.6);
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

header {
  text-align: center;
  margin-bottom: 40px;
  color: var(--text-light);
  position: relative;
  z-index: 1;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
  margin-bottom: 15px;
  letter-spacing: 2px;
  position: relative;
}

h1::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  border-radius: 2px;
}

.subtitle {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  opacity: 0.8;
  font-weight: 300;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
}

.game-container {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 30px;
  padding: 40px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(212, 175, 55, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  max-width: 650px;
  width: 100%;
  position: relative;
  z-index: 1;
}

.game-container::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.3));
  border-radius: 30px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.game-container:hover::before {
  opacity: 1;
}

.wheel-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.wheel-wrapper {
  position: relative;
  width: var(--wheel-size);
  height: var(--wheel-size);
}

#wheelCanvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 
    0 0 40px rgba(212, 175, 55, 0.3),
    0 0 80px rgba(212, 175, 55, 0.2),
    inset 0 0 30px rgba(0, 0, 0, 0.3);
  transition: none; /* ปิด transition เพื่อความเร็ว */
  border: 4px solid rgba(212, 175, 55, 0.3);
  background: radial-gradient(circle at center, rgba(212, 175, 55, 0.1), transparent);
  will-change: contents; /* บอก browser ให้ optimize */
  image-rendering: -webkit-optimize-contrast; /* ทำให้ภาพชัดขึ้น */
  image-rendering: crisp-edges;
}

.wheel-pointer {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: var(--pointer-size) solid transparent;
  border-right: var(--pointer-size) solid transparent;
  border-top: calc(var(--pointer-size) * 1.3) solid var(--primary-color);
  filter: 
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 15px rgba(212, 175, 55, 0.6));
  z-index: 10;
  animation: pointerGlow 2s ease-in-out infinite;
}

@keyframes pointerGlow {
  0%, 100% { 
    filter: 
      drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 15px rgba(212, 175, 55, 0.6));
  }
  50% { 
    filter: 
      drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 25px rgba(212, 175, 55, 0.9));
  }
}

.event-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
  display: none;
}

.event-overlay.active {
  display: block;
}

#eventCanvas {
  width: 100%;
  height: 100%;
}

.mascot-container {
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: 100px;
  display: none;
}

.mascot-container.visible {
  display: block;
}

#mascotCanvas {
  width: 100%;
  height: 100%;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  margin-bottom: 20px;
}

.btn {
  padding: 18px 50px;
  font-size: 1.2rem;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  min-width: 220px;
  position: relative;
  overflow: hidden;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

.btn-primary {
  background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
  color: #1a1a2e;
  box-shadow: 
    0 8px 25px rgba(212, 175, 55, 0.4),
    0 0 0 1px rgba(212, 175, 55, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 
    0 12px 35px rgba(212, 175, 55, 0.6),
    0 0 0 1px rgba(212, 175, 55, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, #f4d03f 0%, #d4af37 50%, #f4d03f 100%);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(-2px) scale(1);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

.btn-secondary {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
  color: var(--text-light);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(212, 175, 55, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.btn-secondary:hover:not(:disabled) {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 
    0 12px 35px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(212, 175, 55, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-color: rgba(212, 175, 55, 0.4);
}

.reduce-motion-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 25px;
  border: 1px solid rgba(212, 175, 55, 0.1);
  transition: all 0.3s ease;
}

.reduce-motion-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(212, 175, 55, 0.2);
}

.reduce-motion-toggle input[type="checkbox"] {
  width: 22px;
  height: 22px;
  cursor: pointer;
  accent-color: #d4af37;
}

.result-box {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(26, 26, 46, 0.3));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 20px;
  padding: 30px;
  margin-top: 30px;
  text-align: center;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 
    inset 0 2px 10px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(212, 175, 55, 0.1);
}

.result-box.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.near-prize {
  font-size: 1.4rem;
  font-weight: 600;
  background: linear-gradient(135deg, #d4af37, #f4d03f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
  letter-spacing: 0.5px;
}

.final-prize {
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, #f4d03f, #d4af37, #f4d03f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 15px;
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
  letter-spacing: 1px;
  animation: textGlow 2s ease-in-out infinite;
}

@keyframes textGlow {
  0%, 100% { 
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
  }
  50% { 
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.8));
  }
}

.roast-message {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
  line-height: 1.6;
  animation: fadeInUp 0.8s ease;
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  border-left: 3px solid rgba(212, 175, 55, 0.5);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(22, 33, 62, 0.95));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--text-light);
  padding: 18px 30px;
  border-radius: 30px;
  font-size: 1.05rem;
  font-weight: 500;
  z-index: 1000;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  max-width: 90%;
  text-align: center;
  border: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(212, 175, 55, 0.2);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.wheel-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  margin-bottom: 35px;
  position: relative;
}

.wheel-wrapper {
  position: relative;
  width: var(--wheel-size);
  height: var(--wheel-size);
  filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.3));
}

@media (max-width: 768px) {
  .game-container {
    padding: 25px;
  }
  
  .mascot-container {
    display: none !important;
  }
  
  :root {
    --wheel-size: min(90vw, 400px);
  }
  
  .btn {
    min-width: 200px;
    padding: 15px 35px;
    font-size: 1.05rem;
  }
  
  h1 {
    font-size: clamp(1.8rem, 6vw, 2.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .result-box {
    transition: opacity 0.3s ease;
  }
}

.shake {
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px) rotate(-1deg); }
  20%, 40%, 60%, 80% { transform: translateX(5px) rotate(1deg); }
}