.wofu-root{display:block;font-family:sans-serif;}
.wofu-root *{box-sizing:border-box;}

.wofu-root .main-container{
  display:flex;flex-direction:column;align-items: stretch;
padding:clamp(12px, 3.5vw, 20px);
  background:#f8fafc;color:#1e293b;
  width:100%;max-width:100%;
  margin:0 auto;border-radius:20px;
}

.wofu-root .wheel-section{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}

.wofu-root .wheel-title{
  margin:0 0 12px 0;
  padding:0 10px;
  width:100%;
  text-align:center;
  font-size:clamp(1.4rem, 4.5vw, 2.1rem);
  font-weight:800;
  letter-spacing:-0.02em;
  color:#0f172a;
}

.wofu-root .canvas-box{
  position:relative;
  width:100%;
  max-width:min(700px, 92vw);
  aspect-ratio:1/1;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:visible;
}

.wofu-root #dynamic-wheel-canvas{
  width:100%;
  height:auto;
  display:block;
}

/* ===== Wheel of Fortune FLAP ===== */
.wofu-root .flap-wrap{
  position:absolute;
  top:clamp(-10px, -1.2vw, -6px);
  left:50%;
  transform:translateX(-50%);
  width:clamp(32px, 7vw, 40px);
  height:clamp(56px, 12vw, 70px);
  z-index:20;
  pointer-events:none;
}
.wofu-root .flap-bolt{
  position:absolute;left:50%;top:6px;
  transform:translateX(-50%);
  width:clamp(14px, 3.5vw, 18px);
  height:clamp(14px, 3.5vw, 18px);
  border-radius:999px;
  background:#ef4444;
  border:3px solid #fff;
}
.wofu-root .flap{
  position:absolute;left:50%;
  top:clamp(18px, 4.6vw, 22px);
  transform:translateX(-50%) rotate(0deg);
  width:clamp(12px, 2.8vw, 14px);
  height:clamp(28px, 7vw, 34px);
  background:#ef4444;
  border:3px solid #fff;
  border-radius:7px;
  transform-origin:50% 0%;
}

.wofu-root #winner-display{
  font-size:clamp(1.4rem, 4.8vw, 2.2rem);
  font-weight:800;
  color:#4f46e5;
  margin:clamp(10px, 2.6vw, 15px) 0;
  min-height:1.2em;
  text-align:center;
  padding:0 10px;
  word-break:break-word;
}

.wofu-root .settings-section{
  width:100%;
  background:#fff;
  padding:clamp(14px, 3.2vw, 20px);
  border-radius:16px;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1);
  margin-top:10px;
}

.wofu-root .config-group {
background:#f1f5f9;
  padding:clamp(12px, 2.6vw, 15px);
  border-radius:12px;
  margin:16px 0;
  width: 100%;
}


.wofu-root .config-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

.wofu-root .config-row label{
  font-weight:600;
  white-space:nowrap;
  font-size:clamp(0.9rem, 2.5vw, 1rem);
  color:#334155;
  min-width:120px;
  flex-shrink:0;
}

/* ===== KORTE NEDTREKKSVINDUER ===== */
.wofu-root select {
  padding:12px 40px 12px 16px;
  border-radius:10px;
  border:2px solid #e2e8f0;
  font-size:clamp(0.95rem, 2.8vw, 1.05rem);
  background-color:white;
  color:#1e293b;
  font-weight:500;
  cursor:pointer;
  transition:all 0.2s ease;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px;
  min-height:48px;
  flex:1;
  min-width:0;
  max-width:100%;
}

/* Winner sound preview button (▶) */
.wofu-root .sound-picker{display:flex;align-items:center;gap:8px;}
.wofu-root .sound-preview-btn{
  all: unset !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 48px !important;
  height: 48px !important;

  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  color: #0f172a !important;
  background: transparent !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;

  opacity: 0.95 !important;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease, box-shadow .12s ease !important;

  touch-action: manipulation !important;
}
.wofu-root .sound-preview-btn:hover{
  opacity: 1 !important;
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
  transform: none !important;
}
.wofu-root .sound-preview-btn:active{
  transform: translateY(0) scale(0.97) !important;
  box-shadow: none !important;
}
.wofu-root .sound-preview-btn:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.18) !important;
}
.wofu-root .sound-preview-btn:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.18) !important;
}
@media (max-width: 640px){
  .wofu-root .sound-preview-btn{width:44px !important;height:44px !important;font-size:22px !important;border-radius:14px !important;}
}


.wofu-root select:hover { border-color:#94a3b8; background-color:#f8fafc; }
.wofu-root select:focus {
  outline:none;
  border-color:#4f46e5;
  box-shadow:0 0 0 3px rgba(79, 70, 229, 0.1);
  background-color:white;
}
.wofu-root select option {
  padding:8px 12px;
  font-size:clamp(0.9rem, 2.5vw, 1rem);
  color:#1e293b;
}

/* ===== OPTIONS INPUTS ===== */
.wofu-root .input-row{
  display:flex;
  gap:10px;
  margin-bottom:10px;
  align-items:center;
  flex-wrap:nowrap;
}

.wofu-root input[type="text"]{
  flex:1;
  min-width:0;
  padding:12px 16px;
  border:2px solid #e2e8f0;
  border-radius:10px;
  font-size:clamp(0.95rem, 2.8vw, 1.05rem);
  color:#1e293b;
  transition:all 0.2s ease;
}

.wofu-root input[type="text"]:focus {
  outline:none;
  border-color:#4f46e5;
  box-shadow:0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Fargevelger */
.wofu-root input[type="color"]{
  width:100%;
  max-width:180px;
  min-width:0;
  height:48px;
  min-height:48px;
  padding:0 !important;
  border-radius:10px;
  border:2px solid #e2e8f0;
  cursor:pointer;
  transition:all 0.2s ease;
  background:#fff;
}

/* Force full-width color field to match dropdown widths */
.wofu-root #bg-color {
  width: 100% !important;
  max-width: 180px !important;
  min-width: 180px !important;
  display: block !important;
}

@media (max-width: 640px) {
  .wofu-root #bg-color {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}


@media (max-width: 640px){
  .wofu-root input[type="color"]{
    max-width:100%;
  }
}


.wofu-root input[type="color"]:hover { border-color:#94a3b8; }
.wofu-root input[type="color"]:focus {
  outline:none;
  border-color:#4f46e5;
  box-shadow:0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* ===== Volume slider ===== */
.wofu-root .vol-control{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
  /* Match dropdown widths on desktop */
  max-width:180px;
  min-width:180px;
}

.wofu-root #volume-slider{
  width:100%;
  flex:1;
  min-width:0;
  accent-color:#8b5cf6;
}

.wofu-root .vol-value{
  font-weight:700;
  color:#475569;
  min-width:52px;
  text-align:left;
}

/* Delete knapp */
.wofu-root .btn-del{
  background:#fee2e2;color:#ef4444;
  padding:0 16px;
  font-size:20px;
  min-height:48px;
  border-radius:10px;
  border:2px solid #fecaca;
  flex:0 0 auto;
  min-width:48px;
  cursor:pointer;
  transition:all 0.2s ease;
}
.wofu-root .btn-del:hover{ background:#fecaca; }

.wofu-root .edit-options-title{
  margin-top:22px;
  margin-bottom:10px;
  font-size:1.05rem;
  color:#1e293b;
  font-weight:700;
}

.wofu-root #dyn-list-container { width:100%; margin-bottom:10px; }

.wofu-root button{
  cursor:pointer;
  border:none;
  border-radius:12px;
  font-weight:700;
  min-height:48px;
  font-size:clamp(0.95rem, 2.8vw, 1.05rem);
  transition:all 0.2s ease;
}

.wofu-root .btn-start{
  background:#22c55e;color:#fff;width:100%;
  padding:16px 20px;
  font-size:clamp(1.05rem, 4.4vw, 1.4rem);
  margin-bottom:10px;
  border-radius:12px;
}
.wofu-root .btn-start:hover{ background:#16a34a; }

.wofu-root .btn-stop{
  background:#ef4444;color:#fff;flex:1;padding:14px 16px;
  border-radius:12px;
}
.wofu-root .btn-stop:hover{ background:#dc2626; }

.wofu-root .btn-reset{
  background:#64748b;color:#fff;flex:1;padding:14px 16px;
  border-radius:12px;
}
.wofu-root .btn-reset:hover{ background:#475569; }

/* Fullscreen button */
.wofu-root .btn-fullscreen{
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:2px solid #e2e8f0;
  background:#ffffff;
  color:#0f172a;
  font-weight:800;
  letter-spacing:0.6px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.2s ease;
  min-height:48px;
}
.wofu-root .btn-fullscreen:hover{ background:#f1f5f9; }

/* Match the vertical spacing used between the other action buttons */
.wofu-root .fullscreen-row{ width:100%; margin-top:12px; }

.wofu-root .btn-add{
  background:#6366f1;color:#fff;width:100%;
  padding:14px 16px;margin-top:10px;
  border-radius:12px;
}
.wofu-root .btn-add:hover{ background:#4f46e5; }

/* Copy knapp */
.wofu-root .btn-copy{
  background:#8b5cf6;color:#fff;
  padding:clamp(10px, 2.2vw, 12px) clamp(16px, 3.5vw, 20px);
  border-radius:10px;
  font-weight:600;
  font-size:clamp(0.85rem, 2.3vw, 0.95rem);
  white-space:nowrap;
  /* Mobile default: full width */
  width:100%;
  transition:all 0.2s ease;
  min-height:48px;
}
.wofu-root .btn-copy:hover{ background:#7c3aed; }

/* Desktop/tablet: keep Share Link input + Copy button on the same line,
   and make Copy the same width as the dropdowns. */
@media (min-width: 641px){
  .wofu-root .share-link-row{ flex-wrap:nowrap; }
  .wofu-root .share-link-input-container{ min-width:0; }
  .wofu-root .share-link-input{ flex:1 1 auto; min-width:0; }
  .wofu-root .btn-copy{
    width:180px;
    min-width:180px;
    max-width:180px;
    flex:0 0 180px;
  }
}

/* Mobile: allow wrapping/stacking if needed */
@media (max-width: 640px){
  .wofu-root .share-link-row{ flex-wrap:wrap; }
}

/* Clear history button */
.wofu-root .btn-clear-history{
  /* Match RESET button color */
  background:#64748b;color:#fff;
  padding:clamp(10px, 2.2vw, 12px) clamp(16px, 3.5vw, 20px);
  border-radius:10px;
  font-weight:600;
  font-size:clamp(0.85rem, 2.3vw, 0.95rem);
  white-space:nowrap;
  flex:0 0 auto;
  transition:all 0.2s ease;
  min-height:48px;
  min-width:max-content;
}
.wofu-root .btn-clear-history:hover{ background:#475569; }

/* Share link */
.wofu-root .share-link-row{
  display:flex;
  align-items:center;
  gap:clamp(8px, 2vw, 12px);
  margin-top:8px;
  flex-wrap:wrap;
  width:100%;
}

.wofu-root .share-link-label{
  font-weight:600;
  font-size:clamp(0.9rem, 2.5vw, 1rem);
  color:#334155;
  white-space:nowrap;
  flex-shrink:0;
  min-width:min(120px, 30%);
  line-height:1.4;
}

.wofu-root .share-link-input-container{
  display:flex;
  /* Desktop/tablet default: keep input + Copy button inline */
  flex-direction:row;
  align-items:stretch;
  gap:clamp(8px, 2vw, 12px);
  flex:1;
  min-width:0;
  max-width:100%;
}

.wofu-root .share-link-input{
  width:100%;
  flex:1;
  padding:clamp(10px, 2.2vw, 12px) clamp(12px, 2.8vw, 16px);
  border:2px solid #e2e8f0;
  border-radius:10px;
  font-size:clamp(0.8rem, 2.1vw, 0.9rem);
  background:#fff;
  color:#64748b;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
  font-family:monospace;
  line-height:1.4;
}

.wofu-root .share-link-input:focus{
  outline:none;
  border-color:#8b5cf6;
  box-shadow:0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* ===== HISTORY SECTION ===== */
.wofu-root .history-section{
  width:100%;
  background:#fff;
  padding:clamp(14px, 3.2vw, 20px);
  border-radius:16px;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1);
  margin-top:clamp(14px, 3.2vw, 20px);
}

.wofu-root .history-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:clamp(12px, 2.6vw, 16px);
}

.wofu-root .history-title{
  font-size:clamp(1.1rem, 3.2vw, 1.3rem);
  font-weight:700;
  color:#1e293b;
  margin:0;
}

.wofu-root .history-count{
  background:#e2e8f0;
  color:#475569;
  padding:4px 12px;
  border-radius:20px;
  font-size:clamp(0.85rem, 2.3vw, 0.95rem);
  font-weight:600;
}

.wofu-root .history-list-container{
  max-height:300px;
  overflow-y:auto;
  border:2px solid #e2e8f0;
  border-radius:12px;
  padding:10px;
  background:#f8fafc;
}

.wofu-root .history-list{ list-style:none; margin:0; padding:0; }

.wofu-root .history-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:clamp(10px, 2.2vw, 14px) clamp(12px, 2.8vw, 16px);
  background:#fff;
  border-radius:10px;
  margin-bottom:8px;
  box-shadow:0 2px 4px rgba(0,0,0,0.05);
  transition:all 0.2s ease;
}
.wofu-root .history-item:last-child{ margin-bottom:0; }
.wofu-root .history-item:hover{ transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,0.1); }

.wofu-root .history-item-winner{
  font-weight:600;
  color:#1e293b;
  font-size:clamp(0.95rem, 2.8vw, 1.05rem);
  flex:1;
}
.wofu-root .history-item-time{
  color:#64748b;
  font-size:clamp(0.8rem, 2.1vw, 0.9rem);
  margin-left:12px;
  white-space:nowrap;
}
.wofu-root .history-empty{
  text-align:center;
  padding:30px 20px;
  color:#94a3b8;
  font-style:italic;
}

/* ===== POPUP ===== */
.wofu-root .winner-popup-overlay{
  position:fixed;
  top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.7);
  display:none;
  justify-content:center;
  align-items:center;
  z-index: 2147483647;
  animation:fadeIn 0.3s ease-out;
  padding:clamp(12px, 4vw, 20px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.wofu-root .winner-popup-overlay.show{ display:flex; }

.wofu-root .winner-popup{
  background:#fff;
  padding:clamp(20px, 5vw, 40px);
  border-radius:clamp(16px, 4vw, 24px);
  text-align:center;
  width:100%;
  max-width:min(500px, 96vw);
  min-width:min(280px, 90vw);
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
  animation:popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position:relative;
  border:1px solid #e5e7eb;
  margin:auto;
  overflow:hidden;
}

.wofu-root .winner-popup-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

.wofu-root .winner-trophy{
  font-size:clamp(3rem, 12vw, 4.5rem);
  margin-bottom:clamp(12px, 3vw, 20px);
  display:block;
  animation:pulse 2s infinite;
  line-height:1;
}

.wofu-root .winner-title{
  font-size:clamp(1.3rem, 5vw, 1.8rem);
  font-weight:800;
  color:#1e293b;
  margin-bottom:clamp(4px, 1vw, 8px);
  text-transform:uppercase;
  letter-spacing:0.5px;
  line-height:1.2;
  width:100%;
  word-break:break-word;
  padding:0 clamp(5px, 2vw, 10px);
}

.wofu-root .winner-subtitle{
  font-size:clamp(0.85rem, 3vw, 1rem);
  color:#64748b;
  margin-bottom:clamp(16px, 4vw, 24px);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.3px;
  line-height:1.3;
  width:100%;
  word-break:break-word;
  padding:0 clamp(5px, 2vw, 10px);
}

.wofu-root .winner-name-container{
  margin:clamp(16px, 4vw, 24px) 0;
  padding:clamp(16px, 4vw, 24px) clamp(12px, 3vw, 20px);
  background:#f8fafc;
  border-radius:clamp(10px, 3vw, 16px);
  border:1px solid #e2e8f0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:clamp(80px, 20vw, 120px);
}

.wofu-root .winner-name{
  font-size:clamp(1.6rem, 6vw, 2.5rem);
  font-weight:800;
  color:#1e293b;
  margin:0;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:0.5px;
  word-break:break-word;
  overflow-wrap:break-word;
  hyphens:auto;
  padding:0 clamp(5px, 2vw, 10px);
  width:100%;
  text-align:center;
}

.wofu-root .winner-close-btn{
  background:#22c55e;
  color:#fff;
  border:none;
  padding:clamp(14px, 4vw, 18px) clamp(30px, 8vw, 50px);
  font-size:clamp(1rem, 3vw, 1.1rem);
  font-weight:700;
  border-radius:clamp(10px, 3vw, 16px);
  cursor:pointer;
  margin-top:clamp(12px, 3vw, 20px);
  transition:all 0.2s ease;
  text-transform:uppercase;
  letter-spacing:0.5px;
  min-height:clamp(48px, 10vw, 56px);
  width:100%;
  max-width:280px;
}
.wofu-root .winner-close-btn:hover{ background:#16a34a; }

/* Fullscreen: keep winner popup above everything */
.wofu-root:fullscreen .winner-popup-overlay {
  z-index: 2147483646 !important;
}
.wofu-root:fullscreen .winner-popup {
  z-index: 2147483647 !important;
}

@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes popIn { 0% {transform:scale(0.9); opacity:0;} 100% {transform:scale(1); opacity:1;} }
@keyframes pulse { 0%,100% {transform:scale(1);} 50% {transform:scale(1.1);} }

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .wofu-root .config-row{ flex-direction:column; align-items:flex-start; gap:8px; }
  .wofu-root .config-row label{ width:100%; margin-bottom:2px; min-width:100%; }
  .wofu-root select{ width:100%; max-width:100%; min-width:100%; }

  .wofu-root .vol-control{ max-width:100%; width:100%; }

  .wofu-root .input-row{ gap:8px; }
  .wofu-root .input-row input[type="text"]{ padding:10px 12px; font-size:0.95rem; }
  .wofu-root .input-row input[type="color"]{ width:44px;height:44px; min-width:44px !important; }
  .wofu-root .input-row .btn-del{ padding:0 12px; min-width:44px; min-height:44px; }

  .wofu-root .share-link-row{ flex-direction:column; align-items:flex-start; gap:6px; }
  .wofu-root .share-link-label{ width:100%; min-width:100%; }
  .wofu-root .share-link-input-container{ width:100%; min-width:100%; flex-direction:column; }
  .wofu-root .share-link-input{ font-size:0.82rem; padding:11px 14px; min-height:48px; }
  .wofu-root .btn-copy{ padding:11px 16px; font-size:0.9rem; min-width:80px; }
  .wofu-root .btn-clear-history{ padding:11px 16px; font-size:0.9rem; min-width:80px; }

  .wofu-root .history-header{ flex-direction:column; align-items:flex-start; gap:10px; }
  .wofu-root .history-item{ flex-direction:column; align-items:flex-start; gap:6px; padding:12px; }
  .wofu-root .history-item-time{ margin-left:0; align-self:flex-end; }

  .wofu-root .winner-popup{ padding:clamp(16px, 6vw, 24px); margin:clamp(10px, 4vw, 20px); max-height:90vh; overflow-y:auto; }
  .wofu-root .winner-name-container{ padding:clamp(12px, 4vw, 18px) clamp(10px, 3vw, 16px); min-height:clamp(70px, 25vw, 100px); }
  .wofu-root .winner-close-btn{ padding:clamp(12px, 4vw, 16px); width:100%; max-width:none; }
}

@media (min-width: 1025px) {
  .wofu-root .share-link-input{ min-width:300px; }
}

/* ===== Reset confirm popup ===== */
.wofu-confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;justify-content:center;align-items:center;z-index:1100;padding:clamp(12px,4vw,20px);box-sizing:border-box;}
.wofu-confirm-overlay.show{display:flex;}
.wofu-confirm-modal{background:#fff;width:100%;max-width:min(460px,96vw);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.3);padding:clamp(18px,5vw,28px);text-align:center;border:1px solid #e5e7eb;box-sizing:border-box;}
.wofu-confirm-icon{font-size:clamp(2.2rem,10vw,3rem);line-height:1;margin-bottom:10px;}
.wofu-confirm-title{font-weight:800;color:#0f172a;font-size:clamp(1.15rem,4.5vw,1.45rem);margin-bottom:6px;}
.wofu-confirm-text{color:#475569;font-weight:500;font-size:clamp(.92rem,3.2vw,1.02rem);line-height:1.35;margin:0 auto 16px;max-width:36ch;}
.wofu-confirm-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.wofu-btn{border:none;border-radius:12px;min-height:48px;padding:12px 16px;font-weight:700;cursor:pointer;transition:all .2s ease;}
.wofu-confirm-overlay .wofu-btn-secondary,
body .wofu-confirm-overlay .wofu-btn-secondary{
  background:#64748b !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  opacity:1 !important;
  filter:none !important;
}
.wofu-confirm-overlay .wofu-btn-secondary:hover,
body .wofu-confirm-overlay .wofu-btn-secondary:hover{
  background:#475569 !important;
}
/*
  Themes (e.g. GeneratePress) can override global button styles.
  Our confirm modals are appended to <body>, so we must NOT rely on
  selectors scoped to #wheel-ultimate-final.
  Force modal button styling with higher specificity + !important.
*/
.wofu-confirm-overlay .wofu-btn-danger,
body .wofu-confirm-overlay .wofu-btn-danger{
  background:#ef4444 !important;
  color:#fff !important;
  border:0 !important;
  opacity:1 !important;
  filter:none !important;
}
.wofu-confirm-overlay .wofu-btn-danger:hover,
body .wofu-confirm-overlay .wofu-btn-danger:hover{
  background:#dc2626 !important;
}
.wofu-confirm-overlay .wofu-btn-danger:active,
body .wofu-confirm-overlay .wofu-btn-danger:active{
  transform:translateY(1px) !important;
}
@media (max-width:480px){.wofu-confirm-actions{flex-direction:column;}.wofu-btn{width:100%;}}

/* ===== GeneratePress override protection for modal buttons ===== */
#wheel-ultimate-final .wofu-confirm-overlay button.wofu-btn,
#wheel-ultimate-final .wofu-confirm-overlay .wofu-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:12px 18px !important;
  border-radius:12px !important;
  border:0 !important;
  cursor:pointer !important;
  font-weight:700 !important;
  font-size:1rem !important;
  line-height:1 !important;
  box-shadow:none !important;
  text-decoration:none !important;
  background-image:none !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}

#wheel-ultimate-final .wofu-confirm-overlay button.wofu-btn-danger,
#wheel-ultimate-final .wofu-confirm-overlay .wofu-btn-danger{
  background:#ef4444 !important;
  color:#fff !important;
}

#wheel-ultimate-final .wofu-confirm-overlay button.wofu-btn-danger:hover,
#wheel-ultimate-final .wofu-confirm-overlay .wofu-btn-danger:hover{
  background:#dc2626 !important;
}

#wheel-ultimate-final .wofu-confirm-overlay button.wofu-btn-secondary,
#wheel-ultimate-final .wofu-confirm-overlay .wofu-btn-secondary{
  background:#64748b !important;
  color:#fff !important;
}

#wheel-ultimate-final .wofu-confirm-overlay button.wofu-btn-secondary:hover,
#wheel-ultimate-final .wofu-confirm-overlay .wofu-btn-secondary:hover{
  background:#475569 !important;
}


/* === Align + Add Option and Clear History buttons (same size/font) === */
.wofu-root .btn-add,
.wofu-root .btn-clear-history{
  padding:clamp(10px, 2.2vw, 12px) clamp(16px, 3.5vw, 20px);
  border-radius:10px;
  font-weight:600;
  font-size:clamp(0.85rem, 2.3vw, 0.95rem);
  min-height:48px;
  width:100%;
  white-space:nowrap;
  text-transform:uppercase;
  letter-spacing:0.04em;
  box-sizing:border-box;
}


/* iPhone/mobile: bigger tap target */
@media (max-width: 640px) {
  .wofu-root .sound-preview-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    font-size: 26px;
    border-radius: 12px;
  }
}

/* --- Winner sound preview button override (ensures mobile size + no hover jump) --- */
.wofu-root .sound-preview-btn{
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  font-size: 22px !important;
  line-height: 1 !important;

  color: #0f172a !important;
  opacity: 1 !important;

  border: 1px solid rgba(148, 163, 184, 0.9) !important;
  border-radius: 10px !important;
  background: transparent !important;

  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

.wofu-root .sound-preview-btn:hover,
.wofu-root .sound-preview-btn:focus,
.wofu-root .sound-preview-btn:focus-visible{
  transform: none !important;
  opacity: 1 !important;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.12) !important;
}

.wofu-root .sound-preview-btn:active{
  transform: none !important;
  box-shadow: 0 0 0 rgba(0,0,0,0) !important;
}

@media (max-width: 640px){
  .wofu-root .sound-preview-btn{
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    font-size: 26px !important;
    border-radius: 12px !important;
  }
}

/* --- Fix: Winner sound row should not overflow on mobile (button + select) --- */
.wofu-root .sound-picker{
  width:100%;
}
.wofu-root .sound-picker select{
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0 !important; /* override global min-width:100% */
}

/* Desktop alignment for winner sound picker */
@media (min-width: 641px) {
  .wofu-root .sound-picker select {
    min-height: 48px;
  }
}

/* --- FIX: Winner sound select on desktop (prevent overrides / narrow width) --- */
@media (min-width: 641px) {
  .wofu-root .sound-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .wofu-root .sound-picker .sound-preview-btn {
    flex: 0 0 48px;
  }
  .wofu-root .sound-picker select {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
  }
}

/* Compact selects (desktop only): keep some dropdowns from stretching too wide */
@media (min-width: 641px) {
  .wofu-root #auto-stop-select,
  .wofu-root #preset-select {
    max-width: 180px;
  }
}

/* --- Desktop: make Winner sound dropdown match Presets/Auto-stop width --- */
@media (min-width: 641px) {
  .wofu-root #sound-select {
    width: auto !important;
    max-width: 180px !important;
    min-width: 180px !important;
  }
  .wofu-root .sound-picker select {
    width: auto !important;
    max-width: 180px !important;
    min-width: 180px !important;
    flex: 0 0 auto !important;
  }
}

/* --- Desktop: keep Winner sound on same row and right-aligned (override width:100% rules) --- */
@media (min-width: 641px) {
  .wofu-root .config-row.sound-row { flex-wrap: nowrap; }
  .wofu-root .config-row.sound-row .sound-picker {
    width: auto !important;
    justify-content: flex-end;
  }
}

/* ---------------- Fullscreen mode ---------------- */
.wofu-root.wofu-fullscreen-active{
  background:#f8fafc;
  padding:16px;
}

.wofu-root.wofu-fullscreen-active .main-container{
  max-width: 1200px;
  margin: 0 auto;
  height: 100vh;
  overflow:auto;
}

.wofu-root.wofu-fullscreen-active .history-section{
  display:none !important;
}

.wofu-root.wofu-fullscreen-active .settings-section > :not(.top-controls){
  display:none !important;
}

.wofu-root.wofu-fullscreen-active .top-controls{
  max-width: 520px;
  margin: 0 auto;
}

/* Fullscreen only: keep the white controls box compact, but not tiny (do not affect normal view) */
@media (min-width: 641px) {
  .wofu-root.wofu-fullscreen-active .settings-section{
    width: min(560px, 94vw);
    max-width: 560px;
    min-width: 420px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
  }
  .wofu-root.wofu-fullscreen-active .top-controls{
    width: 100%;
    max-width: none;
  }
}

/* Fullscreen on smaller screens: still wrap the buttons nicely */
@media (max-width: 640px) {
  .wofu-root.wofu-fullscreen-active .settings-section{
    width: min(420px, 92vw);
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    padding: 16px;
  }
  .wofu-root.wofu-fullscreen-active .top-controls{
    width: 100%;
    max-width: none;
  }
}

/* Hide fullscreen button on mobile */
@media (max-width: 640px) {
  .wofu-root .btn-fullscreen,
  .wofu-root #dyn-fullscreen-btn {
    display: none !important;
  }
}

/* Ensure all major blocks can stretch full width (fix for narrow mobile layout) */
.wofu-root .config-group,
.wofu-root .edit-options,
.wofu-root .options-editor,
.wofu-root .share-row,
.wofu-root .sound-picker{
  width: 100%;
}

/* ===== Winner animations ===== */
.wofu-root .canvas-box.wofu-glow-active::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  pointer-events:none;
  box-shadow:
    0 0 0 6px rgba(99,102,241,.18),
    0 0 28px 10px rgba(99,102,241,.55),
    0 0 60px 18px rgba(99,102,241,.25);
  animation: wofuGlowPulse 1.1s ease-in-out 0s 2;
}
@keyframes wofuGlowPulse{
  0%{ opacity:.35; transform:scale(0.985); }
  50%{ opacity:1; transform:scale(1.01); }
  100%{ opacity:.4; transform:scale(0.99); }
}

/* ===== Stream / OBS mode ===== */
.wofu-root.wofu-stream-mode .main-container{
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
}
.wofu-root.wofu-stream-mode .settings-section,
.wofu-root.wofu-stream-mode .history-section,
.wofu-root.wofu-stream-mode .top-controls,
.wofu-root.wofu-stream-mode .fullscreen-row{
  display:none !important;
}
.wofu-root.wofu-stream-mode .wheel-title{
  margin:0 0 10px 0;
}
.wofu-root .btn-fullscreen{ margin-top:10px; }

/* Make "Winner animation" dropdown match the other compact dropdowns on desktop */
@media (min-width: 641px) {
  .wofu-root #winner-anim-select{
    width: auto !important;
    max-width: 180px !important;
    min-width: 0 !important;
  }
}

/* ==============================
   Winner popup (moved to <body>)
   ============================== */
.winner-popup-overlay{
  /* WPBakery (and some themes) can apply generic .show rules or flex overrides.
     Make the overlay positioning + centering bulletproof and independent of parent layout. */
  position:fixed !important;
  inset:0 !important;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.55);
  display:none;
  align-items:center !important;
  justify-content:center !important;
  z-index:99999;
  overflow:hidden; /* keep popup centered; popup handles its own scrolling */
  padding:24px;
}

/* Show state (works even when overlay is moved outside .wofu-root, e.g. fullscreen)
   We use block + a fixed-centered popup to avoid flex conflicts with builders.
*/
.winner-popup-overlay.show{ display:block !important; }
.winner-popup{
  background:#fff;
  border-radius:18px;
  padding:26px 26px 22px;
  width:min(420px, 92vw);
  max-height:calc(100vh - 48px);
  overflow:auto;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
  position:fixed !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%, -50%) !important;
  margin:0 !important;
}
.winner-popup .winner-popup-icon{
  font-size:48px;
  line-height:1;
  margin-bottom:10px;
}
.winner-popup h2{
  margin:0 0 6px;
  font-size:20px;
  letter-spacing:0.04em;
}
.winner-popup p{
  margin:0 0 14px;
  color:#64748b;
  font-size:12px;
  letter-spacing:0.06em;
}
.winner-popup .winner-name{
  font-size:34px;
  font-weight:800;
  padding:16px 14px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  margin:10px 0 18px;
}
.winner-popup .winner-popup-btn{
  background:#22c55e;
  color:white;
  border:0;
  padding:14px 18px;
  border-radius:14px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  width:100%;
  cursor:pointer;
}
.winner-popup .winner-popup-btn:hover{
  filter:brightness(0.98);
}