.header { padding:20px; text-align:center; }
.title { font-size:48px; font-weight:bold; text-shadow:0 4px 10px #000; }

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:Arial,sans-serif; background:#111; color:#fff; height:100vh; overflow:hidden; }

.mode-menu { display:flex; flex-direction:column; justify-content:center; align-items:center; height:calc(100vh - 100px); }
.modes { display:flex; gap:80px; flex-wrap:wrap; justify-content:center; margin:40px 0; }

.mode-btn { position:relative; cursor:pointer; }
.mode-main {
  padding:20px 60px; font-size:30px; background:#333; border:3px solid #5f27cd; border-radius:16px;
  color:#fff; transition:0.3s;
}
.mode-btn:hover .mode-main { background:#5f27cd; transform:scale(1.1); }
.mode-btn.selected .mode-main { background:#5f27cd; transform:scale(1.15); }

.mode-tooltip {
  position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:15px;
  background:rgba(0,0,0,0.9); padding:12px 20px; border-radius:12px; font-size:16px;
  width:320px; text-align:center;
  opacity:0; visibility:hidden; transition:0.3s; pointer-events:none;
}
.mode-btn:hover .mode-tooltip { opacity:1; visibility:visible; }

.mode-settings { background:rgba(255,255,255,0.1); padding:30px; border-radius:20px; text-align:center; }
.settings-block { margin:15px 0; }
.settings-block label { display:block; margin-bottom:8px; font-size:18px; }
.settings-block input { padding:10px; font-size:18px; width:140px; border-radius:10px; text-align:center; }

.best-scores-block { margin:30px 0; padding:20px; background:rgba(255,255,255,0.15); border-radius:16px; }
.best-scores-block h3 { margin-bottom:12px; font-size:22px; }
#bestScoresList div { font-size:20px; margin:6px 0; font-family:monospace; }

.menu-actions { margin-top:30px; display:flex; gap:20px; }

.btn { padding:12px 30px; font-size:20px; background:#5f27cd; border:none; border-radius:12px; cursor:pointer; transition:0.2s; }
.btn:hover { background:#4a1a9e; transform:scale(1.05); }
.btn.big { padding:16px 40px; font-size:24px; }

.game-area-wrapper { width:100vw; height:100vh; position:relative; }
.game-area { width:100%; height:100%; background:#000; position:relative; cursor:crosshair; }

.target {
  position:absolute; background:#74b9ff; border-radius:50%; box-shadow:0 6px 20px rgba(0,0,0,0.6);
  transition:transform 0.1s;
}
.target:hover { transform:scale(1.15); }

.hud-outside {
  position:fixed; top:20px; left:20px; display:flex; flex-wrap:wrap; gap:15px; z-index:1000; pointer-events:none;
}
.hud-outside .box {
  background:rgba(0,0,0,0.7); padding:10px 18px; border-radius:12px; font-size:22px; min-width:150px; text-align:center; backdrop-filter:blur(4px);
}
#timeBox { background:#3498db; }

.hint {
  position:fixed; top:38%; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,0.8); padding:14px 36px; border-radius:16px; font-size:28px; z-index:150;
  backdrop-filter:blur(6px);
}

.countdown {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:120px; font-weight:bold; z-index:200; text-shadow:0 10px 30px #000;
}

.overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.9); display:flex; justify-content:center; align-items:center; z-index:1000;
}
.overlay-inner { background:#1e1e2e; padding:50px; border-radius:24px; text-align:center; max-width:600px; }
.overlay h2 { font-size:48px; margin-bottom:30px; }
.end-actions { margin-top:40px; display:flex; gap:25px; justify-content:center; }

.hidden { display:none !important; }