/* Sticky footer layout */
html, body{height:100%}
body{min-height:100vh;display:flex;flex-direction:column}
.app-main{flex:1}
.app-footer{margin-top:auto}
:root{
  /* Orange / Black / White palette */
  --bg:#0b0b0b; /* near-black */
  --panel:#111111; /* deep black */
  --muted:#c9c9c9; /* light gray */
  --text:#ffffff; /* white */
  --accent:#f59e0b; /* orange */
  --accent-2:#fb923c; /* light orange */
  --danger:#ef4444; /* red */
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:radial-gradient(100vw 70vh at 70% -15vh, rgba(245,158,11,.12), transparent 60%),
             radial-gradient(70vw 50vh at -10vw 80%, rgba(251,146,60,.10), transparent 60%),
             var(--bg);
  background-attachment: fixed;
}

body.app-loading .app-header,
body.app-loading .app-main,
body.app-loading .app-footer{
  opacity:0;
  pointer-events:none;
}

#appLoadingOverlay{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  background:rgba(11,11,11,.95);
  z-index:9999;
  text-align:center;
  font-weight:600;
  letter-spacing:.5px;
}

#appLoadingOverlay[hidden]{
  display:none !important;
}

body:not(.app-loading) #appLoadingOverlay{
  display:none;
}

#appLoadingOverlay .spinner{
  width:64px;
  height:64px;
  border:6px solid rgba(255,255,255,.2);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 1s linear infinite;
}

#appLoadingOverlay p{
  margin:0;
  font-size:1.2rem;
  color:var(--muted);
}

@keyframes spin{
  to{transform:rotate(360deg);}
}

.app-header{display:flex;justify-content:center;align-items:center;padding:24px;gap:16px;max-width:1100px;margin:0 auto;flex-direction:column}
.app-header h1{margin:0;font-weight:800;letter-spacing:.5px;color:var(--text)}
.app-nav{display:flex;gap:20px;margin-top:12px}
.nav-link{padding:8px 16px;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:var(--text);text-decoration:none;transition:all .2s ease;background:rgba(255,255,255,.05)}
.nav-link:hover{background:rgba(255,255,255,.1);border-color:var(--accent)}
.nav-link.active{background:var(--accent);color:#1f1200;border-color:var(--accent)}

.app-main{display:grid;grid-template-columns:1fr 380px;gap:28px;margin:0 auto;padding:0}
@media (max-width: 980px){.app-main{grid-template-columns:1fr}}

.wheel-section{display:flex;flex-direction:column;align-items:center;gap:16px;background:transparent;border:none;border-radius:0;padding:0}
.wheel-layout{display:grid;grid-template-columns:280px minmax(700px, 2fr) 280px;gap:32px;align-items:center;width:100%;min-height:60vh;max-width:none;margin:0}
.wheel-canvas{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;min-width:0;overflow:visible;max-height:700px;justify-content:center;position:relative}
.wheel-canvas:has(.postwin-message.visible),
.wheel-canvas.has-message{max-height:none;min-height:60vh;overflow:visible}
.wheel-canvas canvas{align-self:center;margin:auto 0}
.postwin-message{display:none !important;color:white !important;font-size:1.8rem !important;font-weight:700 !important;padding:40px !important;margin:0 !important;text-align:center !important;width:100% !important;box-sizing:border-box !important;align-items:center !important;justify-content:center !important;min-height:200px !important;position:absolute !important;top:50% !important;left:50% !important;transform:translate(-50%, -50%) !important;z-index:10 !important;max-width:90% !important;pointer-events:none}
.postwin-message.visible{display:flex !important;pointer-events:auto}
.postwin-message-content{color:white !important;font-size:1.8rem !important;font-weight:700 !important;line-height:1.3 !important;text-align:center !important}
.history-pane{align-self:center;display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;max-height:560px;overflow:auto}
.history-pane h3{margin:0 0 4px 0;font-size:1rem;color:var(--muted)}
.history-pane-full{align-self:top;display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;max-height:560px;overflow:auto}
.history-pane-full h3{margin:0 0 4px 0;font-size:1rem;color:var(--muted)}
.side-controls{display:flex;flex-direction:column;gap:12px;justify-content:center;align-self:center}
.side-controls .tall{padding:18px 22px}
.wheel-main{display:flex;flex-direction:column;align-items:center;gap:12px;justify-content:center}
canvas{max-width:100%;height:auto;border-radius:50%;background:transparent}

.controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* removed remove-winner checkbox styles */

button{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600;transition:transform .05s ease, background .2s ease, border-color .2s ease}
button:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}
button:active{transform:translateY(1px)}
button.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));border-color:transparent;color:#1f1200}
/* removed cookie button styles */
button.secondary{background:rgba(255,255,255,.06)}
button.danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:#fecaca}

.winner{min-height:28px;font-size:1.25rem;font-weight:700;color:var(--accent)}
.postwin-message{display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;min-height:60vh;padding:48px 20px;line-height:1.5;white-space:normal;word-break:break-word;overflow-wrap:break-word;hyphens:auto;column-count:1;width:100%;font-size:1.6rem;margin:0 auto;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:10;max-width:90%}
.postwin-message .postwin-message-content{max-width:820px;margin:0 auto}
.postwin-message strong{color:var(--accent) !important;text-shadow:0 0 10px rgba(245,158,11,.3) !important;font-size:1em !important;font-weight:700 !important}
.history-pane.emphasize{box-shadow:none}
.history-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.history-list li{display:flex;justify-content:space-between;gap:8px;padding:6px 8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);border-radius:10px}
.history-list .who{font-weight:600}
.history-list .when{color:var(--muted);font-size:.9rem}

.names-section{display:flex;flex-direction:column;gap:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:20px}
.names-section h2{margin:0}
.unban-all-controls{margin-bottom:8px;padding:12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:10px}
.unban-all-toggle{display:flex;align-items:center;gap:12px;justify-content:center}

form#nameForm{display:flex;gap:10px}
input#nameInput{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.2);color:var(--text)}

.name-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:360px;overflow:auto}
.name-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);border-radius:10px}
.name-list .tag{display:inline-flex;align-items:center;gap:8px}
.name-list .color{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.4)}
.name-list li.banned{opacity:.55}
.name-list li .remain{color:var(--muted);font-size:.85rem;margin-left:8px}
.name-list .actions{display:flex;align-items:center;gap:12px;flex-direction:row}
.name-list .toggle{display:inline-flex;align-items:center;flex-shrink:0;margin-right:12px;transform:translateY(7px)}
.name-list .toggle input{margin:0}

.import-export{margin-top:8px;color:var(--muted)}
.import-export .row{display:flex;gap:10px;margin-top:8px}
.file input{display:none}
.file span{display:inline-block;padding:10px 14px;border:1px dashed rgba(255,255,255,.25);border-radius:10px;color:var(--muted);cursor:pointer}

/* Global mute button */
.mute-btn{position:fixed;top:12px;right:12px;z-index:1000}
.history-actions{margin-top:12px}

/* Auto-reset section */
.auto-reset-section{margin-top:16px;padding:16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:12px}
.auto-reset-section h3{margin:0 0 12px 0;font-size:1rem;color:var(--text)}
.auto-reset-controls{display:flex;flex-direction:column;gap:12px}
.auto-reset-settings{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.auto-reset-settings .row{display:flex;align-items:center;gap:8px}
.auto-reset-settings label{color:var(--muted);font-size:.9rem;min-width:40px}
.auto-reset-settings select,.auto-reset-settings input[type="time"]{padding:6px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.2);color:var(--text);font-size:.9rem}
.auto-reset-status{margin-top:8px;padding:8px;background:rgba(255,255,255,.04);border-radius:6px;font-size:.85rem;color:var(--muted)}

/* Debug section */
.debug-section{margin-top:16px;padding:16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:12px}
.debug-section h3{margin:0 0 12px 0;font-size:1rem;color:var(--text)}
.debug-controls{display:flex;flex-direction:column;gap:12px}
.debug-controls .toggle{margin:0}
.debug-controls button{margin-top:8px;align-self:flex-start}

/* Toggle switch */
.toggle{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.toggle input{appearance:none;width:40px;height:24px;border-radius:999px;background:rgba(255,255,255,.2);position:relative;outline:none;border:1px solid rgba(255,255,255,.25);transition:background .2s ease}
.toggle input:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .2s ease}
.toggle input:checked{background:linear-gradient(135deg, var(--accent), var(--accent-2));border-color:transparent}
.toggle input:checked:after{left:20px}
.toggle .label{color:var(--text);font-weight:600}

.app-footer{display:flex;justify-content:center;align-items:center;padding:16px;color:var(--muted)}

/* Confetti */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;width:10px;height:14px;opacity:.9}

/* Winner Modal */
.winner-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px)}
.winner-modal[hidden]{display:none !important}
.winner-modal-content{background:var(--panel);border:2px solid var(--accent);border-radius:20px;padding:40px;text-align:center;max-width:500px;width:90%;box-shadow:0 20px 40px rgba(0,0,0,.5);animation:winnerReveal .6s ease-out}
.winner-celebration{font-size:4rem;margin-bottom:20px;animation:bounce 1s ease-in-out infinite}
.winner-title{color:var(--accent);font-size:1.5rem;font-weight:800;margin:0 0 20px 0}
.winner-name{font-size:3rem;font-weight:900;color:var(--text);margin:20px 0;text-shadow:0 0 20px rgba(245,158,11,.5);animation:glow 2s ease-in-out infinite alternate}
.winner-message{color:var(--muted);font-size:1.1rem;margin:20px 0;line-height:1.4;font-style:italic;max-width:400px;margin-left:auto;margin-right:auto}
.winner-actions{display:flex;flex-direction:column;gap:12px;justify-content:center;margin-top:24px;align-items:center}
.winner-actions .primary{padding:16px 32px;font-size:1.1rem;font-weight:600;min-width:200px}
.winner-actions .danger{padding:8px 16px;font-size:0.9rem;opacity:0.8;transition:opacity 0.2s ease}
.winner-actions .danger:hover{opacity:1}
@keyframes winnerReveal{from{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}
@keyframes glow{from{text-shadow:0 0 20px rgba(245,158,11,.5)}to{text-shadow:0 0 30px rgba(245,158,11,.8),0 0 40px rgba(245,158,11,.3)}}
@keyframes spinParticle{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.5) translateY(-50px)}}

/* Auth Modal */
.auth-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:1100;backdrop-filter:blur(3px)}
.auth-modal[hidden]{display:none !important}
.auth-modal-content{background:var(--panel);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:24px;max-width:420px;width:90%;box-shadow:0 18px 40px rgba(0,0,0,.45);animation:winnerReveal .4s ease-out}
.auth-title{margin:0 0 8px 0;color:var(--text);font-weight:800}
.auth-desc{margin:0 0 14px 0;color:var(--muted)}
#authForm{display:flex;flex-direction:column;gap:12px}
#authInput{padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);color:var(--text)}
.auth-actions{display:flex;gap:10px;justify-content:flex-end}
.auth-error{color:#fecaca}

/* Hide underlying UI when auth modal is open */
body.auth-open .app-header,
body.auth-open .app-main,
body.auth-open .app-footer{display:none !important}

/* Error Page */
.error-section{display:flex;align-items:center;justify-content:center;min-height:400px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:40px}
.error-content{text-align:center;max-width:500px}
.error-icon{font-size:4rem;margin-bottom:20px;animation:bounce 2s ease-in-out infinite}
.error-title{color:var(--danger);font-size:2rem;font-weight:800;margin:0 0 16px 0}
.error-message{color:var(--text);font-size:1.1rem;margin:0 0 24px 0;line-height:1.5}
.error-details{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:20px;margin:24px 0;text-align:left}
.error-details p{margin:8px 0;color:var(--muted)}
.error-details strong{color:var(--text)}

/* Route visibility and layout */
.route[hidden]{display:none !important}
.app-main .route-home:not([hidden]){grid-column:1 / -1}
.app-main .route-error:not([hidden]){grid-column:1 / -1}

/* Error page specific layout */
.app-main .error-section{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;min-height:60vh;flex-direction:column;text-align:center;gap:16px}

/* Cookie Modal */
.cookie-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:2000;backdrop-filter:blur(8px)}
.cookie-modal[hidden]{display:none !important}
.cookie-modal-content{background:var(--panel);border:2px solid var(--accent);border-radius:20px;padding:40px;text-align:center;max-width:500px;width:90%;box-shadow:0 20px 40px rgba(0,0,0,.7);animation:cookieReveal .6s ease-out}
.cookie-title{color:var(--accent);font-size:2rem;font-weight:800;margin:0 0 20px 0}
.cookie-message{color:var(--text);font-size:1.1rem;margin:0 0 30px 0;line-height:1.5}
.cookie-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
@keyframes cookieReveal{from{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}