* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: radial-gradient(1200px 800px at 50% 30%, #4a4e55, #2a2d31 70%, #1e2023);
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* ---------- 600x600 centered window ---------- */
.window {
position: relative;
width: 600px;
height: 600px;
background: #000;
border-radius: 18px;
overflow: hidden; /* dots slide in/out from the edges */
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.08),
0 30px 60px rgba(0, 0, 0, 0.55);
user-select: none;
-webkit-user-select: none;
}
/* ---------- bubble-style green button ---------- */
.lock-btn {
position: absolute;
z-index: 5;
left: calc(50% - 65px);
top: calc(50% - 65px);
width: 130px;
height: 130px;
border: none;
border-radius: 50%;
background: radial-gradient(circle at 32% 26%,
#d8ffb0 0%, #8bf05a 28%, #35c93f 55%, #128a2b 78%, #0a5e1e 100%);
color: #04240d;
font: 800 22px/1 system-ui, "Segoe UI", sans-serif;
letter-spacing: 0.5px;
cursor: pointer;
box-shadow:
inset 0 -14px 22px rgba(0, 60, 10, 0.45),
inset 0 10px 16px rgba(255, 255, 255, 0.55),
0 14px 28px rgba(0, 0, 0, 0.55),
0 0 0 6px rgba(120, 255, 120, 0.06);
transition:
left 0.55s cubic-bezier(0.34, 1.4, 0.64, 1),
top 0.55s cubic-bezier(0.34, 1.4, 0.64, 1),
width 0.55s cubic-bezier(0.34, 1.4, 0.64, 1),
height 0.55s cubic-bezier(0.34, 1.4, 0.64, 1),
font-size 0.55s cubic-bezier(0.34, 1.4, 0.64, 1),
box-shadow 0.2s ease,
transform 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
/* glossy "bubble" highlight */
.lock-btn::after {
content: "";
position: absolute;
top: 10%;
left: 20%;
width: 60%;
height: 34%;
border-radius: 50%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
pointer-events: none;
}
.lock-btn:hover { transform: translateY(-2px) scale(1.05); }
.lock-btn:active { transform: translateY(1px) scale(0.94); }
/* locked: shrinks and floats to the upper-left corner, stays clickable */
.window.locked .lock-btn {
left: 20px;
top: 18px;
width: 64px;
height: 64px;
font-size: 15px;
box-shadow:
inset 0 -8px 12px rgba(0, 60, 10, 0.45),
inset 0 6px 10px rgba(255, 255, 255, 0.6),
0 8px 18px rgba(0, 0, 0, 0.55),
0 0 24px rgba(90, 255, 110, 0.5);
}
/* ---------- score counter (upper right) ---------- */
.score {
position: absolute;
z-index: 4;
top: 24px;
right: 26px;
font: 700 28px/1 ui-monospace, "Cascadia Mono", Consolas, monospace;
letter-spacing: 3px;
color: #9dffb0;
text-shadow: 0 0 14px rgba(120, 255, 140, 0.4);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.window.locked .score { opacity: 1; }
.score.bump { animation: bump 0.25s ease; }
@keyframes bump { 40% { transform: scale(1.25); } }
/* ---------- status line ---------- */
.status {
position: absolute;
z-index: 4;
bottom: 22px;
left: 0;
right: 0;
margin: 0;
text-align: center;
color: #7d8590;
font-size: 14px;
letter-spacing: 0.3px;
}
.status b { color: #b6ffc0; font-weight: 600; }
/* ---------- in-window physics knobs ---------- */
.controls {
position: absolute;
z-index: 4;
left: 50%;
bottom: 54px;
transform: translateX(-50%);
width: 520px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 12px 16px 14px;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 12px;
background: rgba(20, 24, 28, 0.72);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.window.locked .controls { opacity: 1; pointer-events: auto; }
.knob { display: block; }
.knob-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
font: 600 10px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace;
letter-spacing: 1px;
text-transform: uppercase;
color: #8b95a1;
margin-bottom: 7px;
white-space: nowrap;
}
.knob-head b { color: #b6ffc0; font-weight: 700; }
.knob input[type="range"] {
width: 100%;
accent-color: #4fd16b;
}
/* ---------- red dots ---------- */
.dot {
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 18px;
height: 18px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #ff9d9d, #ff3b3b 55%, #c01515 100%);
box-shadow: 0 0 10px rgba(255, 60, 60, 0.8), 0 0 24px rgba(255, 60, 60, 0.35);
opacity: 0;
transition: opacity 0.18s ease;
pointer-events: none;
will-change: transform;
}
.dot.on { opacity: 1; }
/* little "pop" ring where a dot is caught */
.pop {
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #ff6b6b;
box-shadow: 0 0 12px rgba(255, 80, 80, 0.6);
pointer-events: none;
animation: pop 0.32s ease-out forwards;
}
@keyframes pop {
from { opacity: 0.9; transform: translate(var(--x), var(--y)) scale(0.4); }
to { opacity: 0; transform: translate(var(--x), var(--y)) scale(2.4); }
}
/* ---------- rocket (trails the invisible cursor) ---------- */
.rocket {
position: absolute;
z-index: 3;
left: 0;
top: 0;
width: 46px;
height: 46px;
margin: -23px 0 0 -23px; /* center element on its (x, y) point */
pointer-events: none;
opacity: 0;
transition: opacity 0.35s ease;
will-change: transform;
filter: drop-shadow(0 0 8px rgba(140, 255, 170, 0.45));
}
.window.locked .rocket { opacity: 1; }
.rocket .flame {
transform-box: fill-box;
transform-origin: 50% 0%;
animation: flick 0.26s infinite alternate ease-in-out;
}
@keyframes flick {
from { transform: scaleY(0.78); opacity: 0.85; }
to { transform: scaleY(1.18); opacity: 1; }
}
/* invisible mouse inside the window while locked
(must come after any competing cursor rules) */
.window.locked,
.window.locked * { cursor: none; }