/* ─── Wheel Container ──────────────────────────────────── */
 #wheel-wrapper {
     position: relative;
     width: 45vw;
     height: 45vw;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: auto;
 }

 #wheel {
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background-image: url("../image/ruleta.webp");
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     /* transition applied from JS once spin is triggered */
     transform-origin: center center;
     will-change: transform;
     filter: drop-shadow(0 0 28px rgba(168, 85, 247, 0.6));
 }

 /* ─── Pointer (tongue) ─────────────────────────────────── */
 #pointer {
     position: absolute;
     top: 38%;
     left: 38%;
     /* width: 200px; */
     width: 12vw;
     transform-origin: center center;
     transform: translate(-43%, -50%);
     z-index: 10;
     filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
     cursor: pointer;
     animation: pulse 1s infinite;

     &:hover {
         transform: translate(-43%, -50%) scale(1.05, 1.05);
         transition: all 0.2s;
     }
 }

 /* ─── Spin Button ──────────────────────────────────────── */
 #spin-btn {
     margin-top: 40px;
     padding: 14px 52px;
     font-size: 1.1rem;
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: #fff;
     background: linear-gradient(135deg, #7c3aed, #a855f7);
     border: none;
     border-radius: 50px;
     cursor: pointer;
     box-shadow: 0 4px 20px rgba(168, 85, 247, 0.5);
     transition:
         transform 0.15s,
         box-shadow 0.15s,
         opacity 0.3s;
 }

 #spin-btn:hover:not(:disabled) {
     transform: translateY(-2px);
     box-shadow: 0 8px 28px rgba(168, 85, 247, 0.7);
 }

 #spin-btn:disabled {
     opacity: 0.45;
     cursor: not-allowed;
 }


 /* ─── Modal Overlay ────────────────────────────────────── */
 #modal-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.75);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 100;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.35s;
     backdrop-filter: blur(4px);
 }

 #modal-overlay.active {
     opacity: 1;
     pointer-events: all;
 }

 /* ─── Modal Card ───────────────────────────────────────── */
 #modal-card {
     background: #ffffff;
     border: 4px solid #7c3aed;
     border-radius: 20px;
     padding: 40px 36px 32px;
     max-width: 420px;
     width: 90%;
     text-align: center;
     box-shadow:
         0 0 40px rgba(168, 85, 247, 0.4),
         0 20px 60px rgba(0, 0, 0, 0.6);
     transform: scale(0.85);
     transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 #modal-overlay.active #modal-card {
     transform: scale(1);
 }

 #modal-card.verde {
     border-color: #4ade80;
     box-shadow:
         0 0 40px rgba(74, 222, 128, 0.5),
         0 20px 60px rgba(0, 0, 0, 0.6);
 }

 #modal-card.morado {
     border-color: #a855f7;
     box-shadow:
         0 0 40px rgba(168, 85, 247, 0.5),
         0 20px 60px rgba(0, 0, 0, 0.6);
 }

 #modal-color-badge {
     display: inline-block;
     padding: 4px 18px;
     border-radius: 30px;
     font-size: 0.85rem;
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;
     margin-bottom: 22px;
 }

 #modal-color-badge.verde {
     background: #14532d;
     color: #4ade80;
     border: 1px solid #4ade80;
 }

 #modal-color-badge.morado {
     background: #3b0764;
     color: #d8b4fe;
     border: 1px solid #d8b4fe;
 }

 #modal-question {
     font-size: 1.25rem;
     color: #1e1033;
     line-height: 1.6;
     margin-bottom: 32px;
     font-weight: 500;
 }

 .modal-buttons {
     display: flex;
     gap: 16px;
     justify-content: center;
 }

 .modal-btn {
     flex: 1;
     max-width: 140px;
     padding: 12px 0;
     font-size: 1rem;
     font-weight: 700;
     border: none;
     border-radius: 12px;
     cursor: pointer;
     letter-spacing: 1px;
     transition:
         transform 0.15s,
         box-shadow 0.15s;
 }

 .modal-btn:hover {
     transform: translateY(-2px);
 }

 #btn-yes {
     background: linear-gradient(135deg, #15803d, #22c55e);
     color: #fff;
     box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4);
 }

 #btn-yes:hover {
     box-shadow: 0 6px 20px rgba(34, 197, 94, 0.6);
 }

 #btn-no {
     background: linear-gradient(135deg, #991b1b, #ef4444);
     color: #fff;
     box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
 }

 #btn-no:hover {
     box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6);
 }

 /* ─── Dorito Modal ─────────────────────────────────────── */
 #dorito-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.75);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 200;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.35s;
     backdrop-filter: blur(4px);
 }

 #dorito-overlay.active {
     opacity: 1;
     pointer-events: all;
 }

 #dorito-card {
     background: #ffffff;
     border: 4px solid #f97316;
     border-radius: 20px;
     padding: 48px 40px 36px;
     max-width: 380px;
     width: 90%;
     text-align: center;
     box-shadow:
         0 0 40px rgba(249, 115, 22, 0.5),
         0 20px 60px rgba(0, 0, 0, 0.6);
     transform: scale(0.85);
     transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 #dorito-overlay.active #dorito-card {
     transform: scale(1);
 }

 #dorito-icon {
     font-size: 3.5rem;
     margin-bottom: 16px;
 }

 #dorito-text {
     font-size: 1.2rem;
     font-weight: 800;
     color: #1e1033;
     margin-bottom: 32px;
     letter-spacing: 0.5px;
 }

 #dorito-close,
 .dorito-btn {
     background: linear-gradient(135deg, #ea580c, #f97316);
     color: #fff;
     box-shadow: 0 4px 14px rgba(249, 115, 22, 0.5);
     padding: 12px 48px;
     font-size: 1rem;
     font-weight: 700;
     border: none;
     border-radius: 12px;
     cursor: pointer;
     letter-spacing: 1px;
     transition:
         transform 0.15s,
         box-shadow 0.15s;
 }

 #dorito-close:hover,
 .dorito-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(249, 115, 22, 0.7);
 }

 #titulo-ruleta {
     position: absolute;
     bottom: 30px;
     left: 0;
     right: 0;
     margin: auto;
     max-width: 30vw;
 }

 .dorito-buttons {
     display: flex;
     gap: 16px;
     justify-content: center;
 }

 .dorito-btn {
     flex: 1;
     max-width: 140px;
     padding: 12px 0;
 }

 /* ─── Result Modal ───────────────────────────────────── */
 #result-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.75);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 300;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.35s;
     backdrop-filter: blur(4px);
 }

 #result-overlay.active {
     opacity: 1;
     pointer-events: all;
 }

 #result-card {
     background: #ffffff;
     border: 4px solid #7c3aed;
     border-radius: 20px;
     padding: 48px 40px 36px;
     max-width: 380px;
     width: 90%;
     text-align: center;
     box-shadow:
         0 0 40px rgba(124, 58, 237, 0.5),
         0 20px 60px rgba(0, 0, 0, 0.6);
     transform: scale(0.85);
     transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 #result-overlay.active #result-card {
     transform: scale(1);
 }

 #result-card.eliminado {
     border-color: #ef4444;
     box-shadow:
         0 0 40px rgba(239, 68, 68, 0.5),
         0 20px 60px rgba(0, 0, 0, 0.6);
 }

 #result-card.siguiente {
     border-color: #22c55e;
     box-shadow:
         0 0 40px rgba(34, 197, 94, 0.5),
         0 20px 60px rgba(0, 0, 0, 0.6);
 }

 #result-icon {
     font-size: 3.5rem;
     margin-bottom: 16px;
 }

 #result-text {
     font-size: 1.4rem;
     font-weight: 800;
     color: #1e1033;
     margin-bottom: 32px;
     letter-spacing: 0.5px;
     line-height: 1.4;
 }

 #result-close {
     padding: 12px 48px;
     font-size: 1rem;
     font-weight: 700;
     border: none;
     border-radius: 12px;
     cursor: pointer;
     letter-spacing: 1px;
     transition:
         transform 0.15s,
         box-shadow 0.15s;
     color: #fff;
 }

 #result-close:hover {
     transform: translateY(-2px);
 }

 #result-close.eliminado {
     background: linear-gradient(135deg, #991b1b, #ef4444);
     box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
 }

 #result-close.eliminado:hover {
     box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6);
 }

 #result-close.siguiente {
     background: linear-gradient(135deg, #15803d, #22c55e);
     box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4);
 }

 #result-close.siguiente:hover {
     box-shadow: 0 6px 20px rgba(34, 197, 94, 0.6);
 }

 @keyframes pulse {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.1);
     }

     100% {
         transform: scale(1);
     }
 }

 /* RESPONSIVE */
 @media(max-width:768px) {
     #wheel-wrapper {
         width: 95vw;
         height: 95vw;
     }

     #pointer {
         width: 25vw;
     }
	  #modal-question, #dorito-text, #result-text {
		  font-size: 1.1rem;
	 }
 }