:root { --accent: #7c5cff; --accent-2: #00e0a4; --muted: #9aa3b2; }
*{box-sizing:border-box}
html,body{height:100%;margin:0;}
#overlayWrapper{overflow: hidden;margin:0;background:transparent;color:#fff;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
#overlayWrapper #overlay{width: 100vw; height: 100vh;}
.overlay{position:relative;overflow:hidden}
.progress-wrap{position:relative;height:75px;margin:0 12px;overflow:hidden;background:rgba(128,128,128,0.75)}
.viewport{position:absolute;inset:0;overflow:hidden}
.track{position:absolute;top:0;left:0;height:100%;will-change:transform}
.progress-bar{position:absolute;top:0;left:0;height:100%;transform:none;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);overflow:hidden;min-width:100%}
.progress-fill{height:100%;width:0;background:lightgreen}
.fields{position:absolute;top:50%;left:0;height:75px;transform:translateY(-50%);display:flex;align-items:stretch}
.field{font-size:14px;position:relative;display:inline-flex;align-items:center;justify-content:center;padding:10px;width:200px;height:100%;border:2px solid rgb(64,64,64)}
.field:not(:last-child){border-right:none}
.field.unlocked{background:#22B14C}
.field .label{position:static;transform:none;color:#fff;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.5);white-space:normal;max-width:100%;text-align:center;overflow:hidden}
.center-indicator{position:absolute;top:0;bottom:0;left:50%;width:0;border-left:2px dashed rgba(255,255,255,.35);pointer-events:none}
.alert{position:fixed;top:250px;left:50%;width:500px;height:300px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.25);opacity:0;pointer-events:none;color:#fff;overflow:hidden;transition:opacity .3s ease}
.alert.show{opacity:1;pointer-events:auto}
.alert .alert-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;animation:celebrate 1s ease}
.alert #alertText{font-size:48px;font-weight:800;text-shadow:0 2px 4px rgba(0,0,0,.6);margin:0 16px}
@keyframes celebrate{0%{transform:scale(.92)}60%{transform:scale(1.02)}100%{transform:scale(1)}}

/* Confetti */
.confetti{position:fixed;width:8px;height:8px;opacity:.9}
.confetti.left{left:-12px;animation:fly-left 1.2s ease-out forwards}
.confetti.right{left:calc(100% + 12px);animation:fly-right 1.2s ease-out forwards}
@keyframes fly-left{from{left:-12px;transform:rotate(0)}to{left:50%;transform:rotate(720deg)}}
@keyframes fly-right{from{left:calc(100% + 12px);transform:rotate(0)}to{left:50%;transform:rotate(-720deg)}}

/* Sound button */
.sound-btn{position:fixed;right:16px;bottom:16px;background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.25);padding:10px 14px;cursor:pointer}