:root{
  --bg:#31373d; --card:#31373d; --text:#ffffff; --muted:#d1d5db; --brand:#059898; --ring:#059898;
  --c-50:#ffffff; /* Blanco */
  --c-40:#31373d; /* Gris */
  --c-30:#059898; /* Verde */
  --btn:#059898; --btnH:#047c7c;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:linear-gradient(180deg,#31373d,var(--bg));color:var(--text)}
.wrap{min-height:100%;display:grid;place-items:center;padding:24px}
.card{width:min(980px,100%);background:rgba(49,55,61,.9);border:1px solid #059898;border-radius:20px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.grid{display:grid;grid-template-columns:1fr clamp(260px,30vw,320px);gap:24px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
h1{margin:0 0 6px;font-size:clamp(20px,2.2vw,28px);letter-spacing:.3px;color:#ffffff;text-align:center;} 
h1 span.highlight{color:#059898;text-shadow:0 0 10px rgba(5,152,152,.9),0 0 20px rgba(5,152,152,.6);font-weight:800;letter-spacing:1px;}
p{margin:0 0 16px;color:var(--muted);text-align:center;font-size:clamp(14px,1.6vw,16px);} 
.stage{position:relative;aspect-ratio:1/1;background:radial-gradient(transparent 62%, rgba(0,0,0,.18) 63%);border-radius:50%;}
canvas{width:100%;height:100%;display:block;border-radius:50%;}
.pointer{position:absolute;inset:auto 0 100% 0;margin:auto;width:0;height:0;border-left:clamp(10px,1.2vw,14px) solid transparent;border-right:clamp(10px,1.2vw,14px) solid transparent;border-bottom:clamp(18px,2vw,26px) solid var(--brand);filter:drop-shadow(0 6px 6px rgba(0,0,0,.4));} 
.center-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background: radial-gradient(circle at top left, #06b6b6, #059898 70%, #047c7c);color:#ffffff;border:none;border-radius:50%;width:clamp(92px,12vw,120px);height:clamp(92px,12vw,120px);font-weight:700;font-size:clamp(18px,2.5vw,22px);cursor:pointer;box-shadow:0 0 25px rgba(5,152,152,.8), inset 0 0 12px rgba(255,255,255,.3);transition:transform .3s ease, filter .3s ease, box-shadow .3s ease;animation:pulse 2s infinite ease-in-out;} 
.center-button:hover{transform:translate(-50%,-50%) scale(1.08);filter:brightness(1.3);box-shadow:0 0 35px rgba(5,152,152,1), inset 0 0 14px rgba(255,255,255,.4);}
@keyframes pulse{0%,100%{box-shadow:0 0 20px rgba(5,152,152,.6), inset 0 0 10px rgba(255,255,255,.2);}50%{box-shadow:0 0 40px rgba(5,152,152,.9), inset 0 0 14px rgba(255,255,255,.4);}}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;justify-content:center;}
.out{font-weight:700;color:#ffffff}
.hint{display:flex;justify-content:center;text-align:center;font-size:clamp(12px,1.2vw,13px);color:var(--muted);margin-top:8px} 

.panel{background:rgba(2,6,23,.4);border:1px solid #059898;border-radius:14px;padding:14px;display:flex;flex-direction:column;min-height:0}
.panel h3{margin:0 0 10px;font-size:clamp(14px,1.4vw,16px);color:#ffffff;text-align:center} 
.legend{list-style:none;margin:0 0 12px 0;padding:0;display:grid;gap:8px}
.legend li{display:flex;align-items:center;gap:10px}
.legend li span:last-child{font-size:clamp(12px,1.4vw,14px)} 
.swatch{width:16px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.25)}
.sw-50{background:var(--c-50)}
.sw-40{background:var(--c-40)}
.sw-30{background:var(--c-30)}

.records{border-top:1px solid #059898;padding-top:12px;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.records h4{margin:0 0 8px 0;font-size:clamp(13px,1.3vw,15px);color:#d1d5db;text-align:center} 
.toolbar{display:flex;gap:8px;justify-content:center;margin-bottom:8px}
.btn-sm{appearance:none;background:#059898;color:#0b1a1a;border:none;border-radius:10px;padding:8px 12px;font-weight:800;cursor:pointer;font-size:clamp(12px,1.2vw,13px)} 
.btn-sm.secondary{background:#2a3137;color:#e5e7eb;border:1px solid #3b4147}
.item{background:#1f252b;border:1px solid #2b333a;border-radius:10px;padding:8px 10px;margin:6px 0}
.item strong{display:block;font-weight:800;font-size:clamp(14px,1.6vw,16px)} 
.item .meta{font-size:clamp(12px,1.2vw,13px);color:#aab1b8;display:flex;justify-content:space-between} 
#recordsList{flex:1;overflow:auto}

 /* ===== Modal (datos + contraseña) ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal{width:min(420px,100%);background:#22282e;border:1px solid #059898;border-radius:16px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal h2{margin:0 0 12px;font-size:clamp(18px,2vw,20px);color:#fff;text-align:center} 
.modal .row{display:flex;gap:10px}
.modal label{font-size:12px;color:#d1d5db;margin-bottom:6px;display:block}
.modal input{width:100%;padding:12px 12px;border-radius:10px;border:1px solid #374151;background:#0f1114;color:#fff;outline:none}
.modal input:focus{border-color:#059898;box-shadow:0 0 0 3px rgba(5,152,152,.25)}
.modal .actions{display:flex;justify-content:center;margin-top:14px}
.btn{appearance:none;background:#059898;color:#0b1a1a;border:none;border-radius:12px;padding:12px 18px;font-weight:800;cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.error{color:#fecaca;font-size:12px;margin-top:8px;text-align:center;display:none}

 /* ===== Modal FELICIDADES (ligero, no altera la UI base) ===== */
#winModal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:60}
#winModal .box{background:#22282e;border:1px solid #059898;border-radius:14px;padding:18px 22px;color:#ffffff;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5);max-width:360px}
#winModal .box h3{margin:0 0 8px;font-size:clamp(20px,2.2vw,22px);color:#059898} 
#winModal .box p{margin:0 0 12px;color:#e5e7eb;line-height:1.4;font-size:clamp(15px,1.8vw,16px)} 
#winModal .box .prize{display:inline-block;font-weight:900;color:#059898;font-size:clamp(20px,2.5vw,22px);letter-spacing:.3px}  
#winModal .box button{background:#059898;color:#0b1a1a;border:none;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer}
#winModal .box .prize::before{content:"🎁 "; margin-right:4px}
#winModal .confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#winModal .confetti span{position:absolute;top:-12px;width:8px;height:14px;opacity:.9;border-radius:2px;animation:confettiDrop 1.2s ease-out forwards}
@keyframes confettiDrop{to{transform:translateY(110vh) rotate(360deg);opacity:.9}}
      
/* ======= Móvil (<=640px) ======= */
@media (max-width:640px){
  .wrap{padding:12px}
  .card{padding:16px;border-radius:16px}
  h1{font-size:20px;line-height:1.2}
  .grid{gap:14px}
  .stage{max-width:92vw;margin-inline:auto}
  .pointer{border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:18px solid var(--brand)}
  .center-button{width:96px;height:96px;font-size:18px}
  .controls{margin-top:10px}
  .panel{padding:12px}
  .btn-sm{padding:10px 12px;font-size:13px}
  .legend{gap:6px}
  .modal{width:min(420px,96%)}
  .modal .row{flex-direction:column;gap:8px}
  .modal input{padding:14px;font-size:16px}
  .modal .actions .btn{width:100%}
  #winModal .box{margin:0 12px}
  #winModal .box p{font-size:15px}
  #winModal .box .prize{font-size:20px}
}

/* Mejor experiencia táctil */
button, .btn, .btn-sm, .center-button{touch-action:manipulation}
    
/* Cerrar modal de contraseña al tocar fuera (cursor visual) */
#passwordModal{cursor:pointer}
#passwordModal .modal{cursor:auto}