/* ================= RESET ================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto;
  background:#0b1020;
  color:#e5e7eb;
}

/* ================= LAYOUT ================= */
.app{
  max-width:1000px;
  margin:40px auto;
  padding:0 20px;
}

.title{
  text-align:center;
  font-size:28px;
  font-weight:800;
  margin-bottom:40px;
}

.layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

/* ================= MOUSE SVG ================= */
.mouse-area{
  text-align:center;
}

.mouse-lock{
  width:260px;
  height:420px;
  margin:auto;
  position:relative;
  cursor:pointer;              /* cursor always above SVG */
}

.mouse-lock svg{
  width:260px;
  height:auto;
  display:block;
  pointer-events:auto;
}

/* CLICK HERE text (hidden by default, JS controls visibility) */
#clickText{
  opacity:0;                   /* 🔒 default hidden */
  pointer-events:none;         /* no interaction */
  animation:pulse 1.4s infinite;
}

/* Pulse animation */
@keyframes pulse{
  0%{ opacity:.2 }
  50%{ opacity:1 }
  100%{ opacity:.2 }
}

/* ================= BUTTONS ================= */
.buttons{
  margin-top:20px;
  display:flex;
  justify-content:center;
  gap:12px;
}

.btn{
  padding:12px 26px;
  border:none;
  border-radius:8px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:background .2s, box-shadow .2s;
}

/* ===== START TEST BUTTON ===== */
.btn.start{
  background:linear-gradient(135deg,#2563eb,#38bdf8);
  box-shadow:0 0 0 rgba(56,189,248,0);
  transition:all .25s ease;
}

.btn.start:hover{
  transform:translateY(-2px);
  box-shadow:0 0 18px rgba(56,189,248,.8);
}

/* ===== RESET BUTTON ===== */
.btn.reset{
  background:linear-gradient(135deg,#dc2626,#f87171);
  transition:all .25s ease;
}

.btn.reset:hover{
  transform:translateY(-2px);
  box-shadow:0 0 16px rgba(248,113,113,.8);
}


/* ================= RESULT ================= */
.result-card{
  background:#111827;
  padding:25px;
  border-radius:14px;
}

.result-card h3{
  margin-bottom:10px;
}

.cps{
  font-size:32px;
  font-weight:800;
  color:#00f7ff;
  margin-bottom:15px;
}

.result-card ul{
  list-style:none;
}

.result-card li{
  display:flex;
  justify-content:space-between;
  padding:6px 0;
  font-size:14px;
}
#clickText{
  animation:pulse 1.4s infinite;
}

@keyframes pulse{
  0%{opacity:.2}
  50%{opacity:1}
  100%{opacity:.2}
}


/* ================= RESPONSIVE ================= */
@media(max-width:900px){
  .layout{
    grid-template-columns:1fr;
    gap:40px;
  }
}