html, body {
  width: 100%;
  overflow-x: hidden;
}



*{box-sizing:border-box;font-family:Roboto}
body{margin:0;background:#f5f5f5}

.topbar{height:56px;background:#fff;display:flex;align-items:center;padding:0 16px;box-shadow:0 2px 6px rgba(0,0,0,.2)}


/*.wheel-area{flex:1;display:flex;align-items:center;justify-content:center}*/

.wheel-area{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:54px 0; /* spacing for shadow */
}

.wheel-container{position:relative;width:min(92vw,540px);aspect-ratio:1/1}

.wheel-container{
  position:relative;
  width:min(92vw,540px);
  max-width:100%;
  aspect-ratio:1/1;
}


canvas{
  width:100%;
  height:100%;
  border-radius:50%;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
 
.app{
  display:flex;
  max-width:100vw;
  overflow-x:hidden;
  overflow-y:visible;   /* 🔥 allow content below */
}




.spin-center{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:90px;height:90px;
  background:#fff;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-weight:500
}

.pointer{
  position:absolute;
  top:50%;
  right:-47px;                 /* overlap wheel */
  
  width:0;
  height:0;

  /* BIGGER arrow */
  border-top:20px solid transparent;
  border-bottom:20px solid transparent;
  border-left:54px solid #e53935; /* color updated via JS */

  /* Proper alignment */
  transform:translateY(-50%) rotate(180deg);

  /* STRONG SHADOW */
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55));

  z-index:5;
}




.panel{width:320px;background:#fff;padding:12px;overflow-y:auto;}

.tabs{display:flex;margin-bottom:8px}
.tab{flex:1;padding:8px;border:none;cursor:pointer;background:#ddd}
.tab.active{background:#1976d2;color:#fff}

.toolbar{display:flex;gap:8px;margin-bottom:6px}
textarea{width:100%;height:200px;padding:8px;font-size:15px}
#history li{padding:6px;border-bottom:1px solid #ccc}

@media(max-width:768px){
  .app{flex-direction:column}
  .panel{
    width:100%;
    margin-top: 40px; 
  }
  .wheel-area{
    margin-top: 40px; 
  }
}

@media(max-width:768px){ 
  .panel{
    max-height:100%;
    overflow:hidden;
  }
}


@media(max-width:768px){
  .app{
    flex-direction:column;
  }

  .panel{
    width:100%;
  }
}



canvas.confetti-canvas{
  position:fixed !important;
  top:0;left:0;
  width:100vw !important;
  height:100vh !important;
  pointer-events:none;
  box-shadow:none !important;
  background:transparent !important;
  z-index:9999;
}



/* Winner popup modal */
.winner-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10000;
}

.winner-modal.show{ display:flex; }

.winner-card{
  background:#fff;
  padding:30px 40px;
  border-radius:18px;
  text-align:center;
  animation:pop 0.5s ease;
}

.winner-card h2{ margin:0 0 10px; }

.winner-name{
  font-size:28px;
  font-weight:600;
  margin-bottom:18px;
}

.winner-card button{
  padding:10px 24px;
  border:none;
  background:#1976d2;
  color:#fff;
  border-radius:999px;
  cursor:pointer;
}

@keyframes pop{
  0%{ transform:scale(.7); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}


/* ===== PROFESSIONAL TABS ===== */

.tabs{
  display:flex;
  position:relative;
  background:#f3f4f6;
  border-radius:14px;
  padding:6px;
  gap:6px;
  margin-bottom: 30px;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.08),
    0 4px 12px rgba(0,0,0,.08);
}

/* Tab button */
.tab{
  flex:1;
  position:relative;
  padding:12px 0;
  border:none;
  background:transparent;
  font-size:15px;
  font-weight:500;
  color:#555;
  cursor:pointer;
  border-radius:10px;
  transition:
    background .25s ease,
    color .25s ease,
    box-shadow .25s ease;
  z-index:1;
}

/* Hover */
.tab:hover{
  color:#1976d2;
}

/* Active tab */
.tab.active{
  background:#fff;
  color:#1976d2;
  box-shadow:
    0 4px 10px rgba(0,0,0,.12);
}

/* Optional subtle indicator line */
.tab.active::after{
  content:"";
  position:absolute;
  bottom:-6px;
  left:20%;
  width:60%;
  height:3px;
  background:#1976d2;
  border-radius:999px;
}


/* ===== ENTRY BOX (PRO DESIGN) ===== */

.entry-box{
  background:#fff;
  border-radius:18px;
  padding:14px;
  box-shadow:
    0 8px 24px rgba(0,0,0,.08),
    inset 0 1px 2px rgba(255,255,255,.8);
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Header */
.entry-header{
  font-size:14px;
  font-weight:500;
  color:#1976d2;
  padding-left:6px;
}

/* Textarea */
.entry-box textarea{
  width:100%;
  min-height:180px;
  resize:none;
  border:none;
  outline:none;
  font-size:15px;
  line-height:1.6;
  padding:12px 14px;
  border-radius:14px;
  background:#f6f7f9;
  transition:
    background .25s ease,
    box-shadow .25s ease;
}

/* Focus effect */
.entry-box textarea:focus{
  background:#fff;
  box-shadow:
    0 0 0 3px rgba(25,118,210,.18),
    0 6px 16px rgba(0,0,0,.12);
}

/* Footer hint */
.entry-footer{
  font-size:12px;
  color:#777;
  text-align:right;
  padding-right:6px;
}

/* Mobile spacing */
@media(max-width:768px){
  .entry-box textarea{
    min-height:150px;
  }
}



/* ===== RESULT ITEM ANIMATION ===== */
@keyframes resultFade {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Result item */
.result-list li{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 10px;
  padding:10px 14px;
  border-radius:12px;
  background:#f6f7f9;
  font-size:15px;
  font-weight:500;
  color:#333;
  animation: resultFade .35s ease;
}

/* Winner color dot */
.result-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex-shrink:0;
}

/* Text + time wrapper */
.result-content{
  display:flex;
  flex-direction:column;
  gap:2px;
}

/* Timestamp */
.result-time{
  font-size:11px;
  color:#777;
}

/* Latest winner highlight */
.result-list li:first-child{
  background:linear-gradient(135deg,#1976d2,#42a5f5);
  color:#fff;
}
.result-list li:first-child .result-time{
  color:rgba(255,255,255,.85);
}

/* Clear button */
.clear-btn{
  background:none;
  border:none;
  color:#1976d2;
  font-size:13px;
  cursor:pointer;
  margin-left:auto;
}
.clear-btn:hover{
  text-decoration:underline;
}

/* ===== TOOLBAR BUTTONS (SAME BLUE) ===== */

.toolbar{
  display:flex;
  gap:10px;
  margin-bottom:10px;
}

/* Base button */
.tool-btn{
  flex:1;
  padding:10px 0;
  border:none;
  border-radius:999px;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  /* Blue theme */
  background:linear-gradient(135deg,#1976d2,#42a5f5);
  color:#fff;

  box-shadow:0 6px 14px rgba(25,118,210,.35);

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

/* Hover */
.tool-btn:hover{
  box-shadow:0 10px 22px rgba(25,118,210,.45);
  transform:translateY(-1px);
}

/* Active */
.tool-btn:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(25,118,210,.35);
}

/* Mobile */
@media(max-width:480px){
  .tool-btn{
    font-size:13px;
    padding:9px 0;
  }
}




/* ===== GAME INFO CARDS (BELOW WHEEL) ===== */

.game-info{
  padding:24px 16px 32px;
  background:#f5f7fa;
}

.game-info-grid{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}

/* Card */
.game-info-card{
  background:#fff;
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}

/* Small heading */
.game-info-card h5{
  margin:0 0 4px;
  font-size:13px;
  font-weight:600;
  color:#1976d2;
}

/* Text */
.game-info-card p{
  margin:0;
  font-size:12.5px;
  line-height:1.55;
  color:#444;
}

/* Mobile */
@media(max-width:480px){
  .game-info{
    padding:18px 12px 24px;
  }
}