:root{
  --bg:#0f1724;
  --card:#0b1220;
  --accent:#ff4d6d;
  --muted:#9aa4b2;
  --glass: rgba(255,255,255,0.03);
  --shadow: 0 8px 24px rgba(2,6,23,0.6);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background:linear-gradient(180deg,#071020 0%, #071825 60%);
  color:#e6eef6;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}
.container{width:100%;max-width:980px;text-align:center}
.app-view[hidden]{display:none}
.view-header{display:flex;justify-content:center;align-items:center;gap:16px;margin:0 0 16px}
.brand{margin:0;font-weight:700;letter-spacing:1px}
.view-btn{border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.06);color:#e6f6ff;border-radius:8px;padding:10px 14px;font-weight:700;cursor:pointer}
.view-btn:hover{background:rgba(255,255,255,0.1)}
.wheel-wrap{position:relative;margin:0 auto;display:inline-block;width:min(86vw,600px)}
#wheel{position:relative;z-index:2}
.wheel-wrap::before{
  content: "";
  position:absolute;
  inset:0;
  display:block;
  background-image: url('favicon sk greenSkult Logo.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  opacity: 0.06;
  filter: saturate(0.9) brightness(0.95);
  z-index:0;
  pointer-events:none;
}
#spinnerIcon{display:none}
#wheel{width:100%;height:auto;display:block;border-radius:50%;box-shadow:var(--shadow);background:var(--glass)}
.spin-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;border-radius:999px;padding:28px 36px;background:linear-gradient(180deg,#ff7a18,#ff9f43);border:none;color:white;font-size:20px;font-weight:700;box-shadow:0 6px 28px rgba(255,125,40,0.18);cursor:pointer}
#pointer{display:none}
.spin-btn:disabled{opacity:0.6;cursor:not-allowed}
#confetti-canvas-wrap{position:fixed;inset:0;pointer-events:none;z-index:20}
#confetti{width:100%;height:100%}

.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,0.6);opacity:0;pointer-events:none;transition:opacity 220ms ease, visibility 220ms;z-index:70}
.modal[aria-hidden="false"]{opacity:1;pointer-events:auto}
.modal-card{position:relative;min-width:280px;max-width:92vw;background:linear-gradient(180deg,#0c1722,#071224);padding:22px;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,0.7);text-align:center;color:#f6fbff}
.close{position:absolute;right:18px;top:18px;border:none;background:transparent;color:#9fb0c8;font-size:20px;cursor:pointer}
.result-icon{font-size:44px;margin-bottom:6px}
.result-message{margin:8px 0 16px;color:#cfe8ff}
.modal .btn{background:transparent;border:1px solid rgba(255,255,255,0.08);padding:10px 16px;border-radius:10px;color:#e6f6ff;cursor:pointer}
.player-name-capture{margin-top:12px}
.player-label{display:flex;flex-direction:column;align-items:stretch;font-weight:600;color:#cdd6f4;margin:12px 0;font-size:0.95rem}
.player-label input{margin-top:8px;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.05);color:#f8fbff;font-size:0.95rem}
.player-label input::placeholder{color:rgba(255,255,255,0.4)}
#submitWinnerBtn{margin-top:8px;background:linear-gradient(180deg,#ff7a18,#ff9f43);border:none;color:white;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:600}
#submitWinnerBtn:disabled{opacity:0.65;cursor:not-allowed}
.winner-status{min-height:18px;margin:8px 0 0;color:#9fe1ff;font-size:0.85rem}
.history-panel{margin:0 auto;max-width:980px;background:rgba(255,255,255,0.04);padding:20px;border-radius:16px;box-shadow:0 16px 50px rgba(0,0,0,0.25);text-align:left}
.history-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px}
.history-panel h2{margin:0;font-size:18px;letter-spacing:0.6px;color:#f5f7ff}
.history-panel h3{margin:0 0 12px;font-size:15px;color:#f5f7ff}
.history-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px;margin-bottom:18px}
.stat-box{background:rgba(255,255,255,0.06);padding:14px;border-radius:12px;text-align:center;border:1px solid rgba(255,255,255,0.08)}
.stat-label{display:block;color:var(--muted);font-size:0.85rem;margin-bottom:4px}
.stat-value{display:block;font-size:24px;font-weight:700;color:#9fe1ff}
.history-list ul{list-style:none;padding:0;margin:0;max-height:300px;overflow-y:auto}
.history-list li{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.08);font-size:0.9rem;color:#eef2ff;display:flex;justify-content:space-between;align-items:center;gap:12px}
.history-list li > span:first-child{min-width:0;overflow-wrap:anywhere}
.history-list li.no-history{color:var(--muted);text-align:center;border:none}
.history-date{color:var(--muted);font-size:0.85rem;flex:0 0 auto}
.history-player{color:#9fe1ff;font-weight:600}
.highlight{box-shadow:0 0 26px rgba(255,255,77,0.18) inset}

/* Prize image inside modal */
.result-image{max-width:220px;width:80%;height:auto;border-radius:8px;margin:8px auto 12px;display:block;box-shadow:0 12px 40px rgba(2,6,23,0.6)}

@media (max-width:640px){
  body{align-items:flex-start;padding:20px}
  .view-header,.history-header{align-items:stretch;flex-direction:column}
  .view-btn{width:100%}
  .spin-btn{padding:18px 24px;font-size:16px}
  #pointer{border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:20px solid var(--accent)}
}

/* small flourish */
.brand{background:linear-gradient(90deg,#9fe1ff,#ffd0df);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:20px}