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

html, body {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #dfdfdf;
  background-color: #131315;
}

/* ----------------------- Main Layout ----------------------- */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(1rem, 2vw, 2.5rem) clamp(0.5rem, 2vw, 1.5rem);
}

#main {
  width: 100%;
  max-width: 1200px;
  min-height: calc(100vh - 2 * clamp(1rem, 2vw, 2.5rem));
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: clamp(20px, 4vw, 40px);
}

/* ----------------------- Left Panel ----------------------- */
.left-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* Header / Logo */
.header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.logo {
  width: clamp(150px, 20vw, 600px);   /* responsive width */
  max-height: clamp(70px, 15vh, 200px); /* prevent flattening */
  height: auto;                        /* maintain aspect ratio */
  padding: clamp(3px, 0.5vw, 8px);
  background-color: #131315;
  align-self: center;
  border-radius: clamp(4px, 1vw, 8px);
  margin-bottom: clamp(5px, 1vh, 12px);
  object-fit: contain;                 /* ensures it scales nicely inside box */
}


/* Heading */
h1 {
  color: #efd071;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  margin-bottom: clamp(15px, 2vh, 30px);
  margin-top: clamp(20px, 3vh, 40px);
}

/* Form Inputs */
.inline-form {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.5vw, 10px);
  width: 100%;
  max-width: 350px;
}

.inline-form input {
  width: 100%;
  padding: clamp(0.5em, 1vw, 0.8em) clamp(0.5em, 1.5vw, 0.8em);
  border-radius: clamp(4px, 1vw, 8px);
  border: none;
  background: #fff;
  color: #131315;
}

.inline-form button {
  margin-top: clamp(10px, 1vh, 10px);
  padding: clamp(1em, 1.5vw, 1.2em) clamp(1em, 3vw, 1.5em);
  border-radius: clamp(4px, 1vw, 8px);
  border: none;
  background: #644f08;
  color: #fde901;
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 30px;
  width: auto;
}

.inline-form button:hover {
  background: #fde901;
  color: #131315;
}

/* Status */
.status {
  margin-top: clamp(8px, 1.5vh, 12px);
  padding: clamp(0.4em, 1vw, 0.6em) clamp(0.6em, 2vw, 1em);
  border-radius: clamp(4px, 1vw, 8px);
  background: #644f08;
  color: #fff;
  word-break: break-word;
  max-width: clamp(140px, 35vw, 220px);
  text-align: center;
  align-self: left;
}

/* ----------------------- Right Panel (Wheel) ----------------------- */
.right-panel {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Wheel container */
.wheel-stage {
  width: clamp(300px, 45vw, 500px);
  aspect-ratio: 1 / 1;
  position: relative;
}

/* Wheel canvas */
#wheel {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 50%;
}

/* ----------------------- Pointer ----------------------- */
#pointer {
  position: absolute;
  left: 50%;
  top: calc(50% - (50% + 2vh));
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: clamp(8px, 3vw, 14px) solid transparent;
  border-right: clamp(8px, 3vw, 14px) solid transparent;
  border-top: clamp(16px, 6vw, 28px) solid #e70800;
  z-index: 20;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}

/* ----------------------- Responsive ----------------------- */
@media (max-width: 1024px) {
  canvas#wheel { max-height: 500px; }
}

@media (max-width: 768px) {
  .top-row {
    flex-direction: column;
    align-items: center;
    gap: clamp(15px, 3vw, 20px);
  }

  .left-panel, .right-panel {
    width: 100%;
    align-items: center;
  }

  .inline-form input, .inline-form button {
    max-width: 80%;
    font-size: clamp(0.8rem, 2.5vw, 0.9rem);
    padding: clamp(0.8em, 1.5vw, 1em) clamp(0.8em, 2.5vw, 1.2em);
  }

    .wheel-stage {
    width: clamp(300px, 70vw, 400px); /* increase preferred width */
  }
  .status { width: 80%; font-size: clamp(0.75rem, 2vw, 0.85rem); max-width: 220px; }
}

@media (max-width: 480px) {
  .wheel-stage {
    width: clamp(250px, 80vw, 350px); /* bigger wheel relative to screen */
  }
  .inline-form input, .inline-form button {
    max-width: 95%;
    font-size: clamp(0.7rem, 3vw, 0.85rem);
    padding: clamp(0.5em, 2vw, 0.8em) clamp(0.7em, 3vw, 1em);
  }
  .status { width: 90%; font-size: clamp(0.7rem, 2.5vw, 0.8rem); max-width: 200px; }
}

/* ----------------------- Result Text ----------------------- */
.final-value, #final-value {
  margin-top: clamp(15px, 3vh, 20px);
  font-size: clamp(1.5rem, 5vw, 2rem);
  color: #131315;
  min-height: 36px;
  word-break: break-word;
}

/* ----------------------- Win Popup ----------------------- */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(19, 19, 21, 0.8);
  backdrop-filter: blur(3px);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-box {
  background: #fff;
  color: #131315;
  padding: clamp(20px, 5vw, 30px) clamp(15px, 4vw, 24px);
  border-radius: clamp(12px, 3vw, 16px);
  text-align: center;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  animation: popupFade 0.3s ease;
}

.popup-box h2 { color: #644f08; margin-bottom: clamp(12px, 2vh, 16px); font-size: clamp(1.2rem, 4vw, 1.5rem); }
.popup-box p  { color: #131315; font-size: clamp(0.9rem, 3vw, 1rem); margin-bottom: clamp(12px, 2vh, 16px); }
.popup-box button {
  background: #644f08;
  color: #fde901;
  border: none;
  border-radius: clamp(4px, 1vw, 8px);
  padding: clamp(8px, 2vw, 10px) clamp(15px, 4vw, 20px);
  font-size: clamp(14px, 4vw, 16px);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}
.popup-box button:hover {
  background: #131315;
  color: #efd071;
}

@keyframes popupFade { from { transform: scale(0.9); opacity:0; } to { transform: scale(1); opacity:1; } }