html,body{height:100%;margin:0;display:flex;flex-direction:column;background:#111}
#game-root{flex:1;display:flex;align-items:center;justify-content:center;position:relative;background:#111;box-sizing:border-box;padding:10px 0 14px;min-height:0}
/* utility hidden class used by modals */
.hidden{display:none !important}
:root{--btn-padding:6px 10px;--btn-font-size:15px;--btn-icon-size:18px;--anim-fast:180ms;--anim-mid:260ms}
canvas{background:#87CEEB;display:block;border-radius:6px;box-shadow:0 8px 30px rgba(0,0,0,0.7);position:relative;z-index:1;touch-action:none;max-width:94vw;max-height:calc(100vh - 180px)}

/* Controls container (keeps mode + ui together, prevents overlap) */
#controls{position:relative;left:auto;top:auto;right:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:10px;background:rgba(0,0,0,0.65);border-radius:12px;margin:8px auto 0 auto;max-width:calc(100vw - 16px);box-sizing:border-box;z-index:60}
#controls button,#controls label{flex-shrink:0;white-space:nowrap}
#mode-selector{color:#fff;font-family:Arial,Helvetica,sans-serif;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#mode-selector button{margin-left:4px;padding:6px 8px;background:#222;color:#fff;border:1px solid #444;border-radius:4px}

#ui{position:relative;color:#fff;font-family:Arial,Helvetica,sans-serif;z-index:20;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#ui button{padding:var(--btn-padding);background:#222;color:#fff;border:1px solid #444;border-radius:6px;font-size:var(--btn-font-size);display:inline-flex;align-items:center;gap:8px}

#score-display{position:absolute;top:20px;left:50%;transform:translateX(-50%);color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:20px;z-index:80;padding:8px 14px;background:rgba(0,0,0,0.45);border-radius:8px;font-weight:700;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* Ready indicator shown when waiting to start */
#game-status-score{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:85;background:rgba(0,0,0,0.8);color:#fff;padding:10px 16px;border-radius:12px;font-weight:800;font-family:Arial,Helvetica,sans-serif;pointer-events:none;white-space:nowrap;font-size:16px;letter-spacing:0.02em;box-shadow:0 8px 18px rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.15);}
#ready-indicator{position:absolute;top:74px;left:50%;transform:translateX(-50%);z-index:85;background:rgba(0,0,0,0.45);color:#fff;padding:6px 12px;border-radius:8px;font-weight:700;font-family:Arial,Helvetica,sans-serif}

@media (max-width: 520px) {
  #game-status-score{font-size:18px;padding:12px 18px;border-radius:14px;max-width:calc(100vw - 32px);width:auto;box-shadow:0 12px 24px rgba(0,0,0,0.55);}
  #ready-indicator{top:96px;left:50%;font-size:14px;padding:8px 14px;}
}

/* Game over overlay */
/* game-over with smooth transition (use opacity & transform for perf) */
#game-over{position:absolute;left:50%;top:40%;transform:translate(-50%,-45%) scale(0.98);z-index:1000;opacity:0;pointer-events:none}
#game-over:not(.hidden){transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
#game-over .over-inner{background:rgba(10,20,25,0.92);padding:18px;border-radius:8px;color:#fff;text-align:center;min-width:260px;transition:transform 180ms ease,opacity 180ms ease}
#game-over .over-inner{transition:transform var(--anim-fast) ease,opacity var(--anim-fast) ease}
#game-over-text{font-size:22px;font-weight:700;margin-bottom:10px;-webkit-font-smoothing:antialiased}
#game-over-score{font-size:15px;color:#ddd;margin-bottom:12px;line-height:1.4}
#game-over .over-actions{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
#game-over input{padding:6px;border-radius:6px;border:1px solid #333}
#game-over button{padding:6px 10px;border-radius:6px;border:1px solid #444;background:#0a84ff;color:#fff}

/* Leaderboard modal */
#leaderboard-modal{position:fixed;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:1001;opacity:0;pointer-events:none}
#leaderboard-modal:not(.hidden){opacity:1;pointer-events:auto}
#leaderboard-modal .modal-inner{background:#111;color:#fff;padding:18px;border-radius:8px;border:1px solid #333;min-width:340px;max-width:90%;max-height:80%;overflow:auto;transform:translateY(-6px);transition:transform var(--anim-mid) ease,opacity var(--anim-mid) ease}
#leaderboard-list{margin-top:8px}
#leaderboard-list table{width:100%;border-collapse:collapse}
#leaderboard-list th,#leaderboard-list td{padding:8px;border-bottom:1px solid rgba(255,255,255,0.06);text-align:left}
#leaderboard-list th{font-weight:700;background:rgba(255,255,255,0.03)}
#leaderboard-modal .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}

/* settings modal uses same transition pattern as leaderboard */
#settings-modal{position:fixed;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:1001;opacity:0;pointer-events:none}
#settings-modal:not(.hidden){opacity:1;pointer-events:auto}
#settings-modal .modal-inner{background:#111;color:#fff;padding:18px;border-radius:8px;border:1px solid #333;min-width:260px;transform:translateY(-6px);transition:transform var(--anim-fast) ease,opacity var(--anim-fast) ease}
#settings-modal input[type=range]{width:100%}

/* leaderboard row animations */
#leaderboard-list table{width:100%;border-collapse:collapse}
#leaderboard-list tbody tr{opacity:0;transform:translateY(6px);transition:opacity var(--anim-mid) ease,transform var(--anim-mid) ease}
#leaderboard-list tbody tr.visible{opacity:1;transform:none}

/* responsive tweaks for small screens */
#difficulty-controls{display:inline-flex;gap:6px;margin-left:8px}
#difficulty-controls button{padding:6px 8px;background:#222;color:#fff;border:1px solid #444;border-radius:4px}
#difficulty-controls button.active,#mode-selector button.active{background:#0a84ff;border-color:#0a6fe6}

@media (max-width: 480px) {
	#controls{left:8px;top:8px;padding:4px;gap:6px}
	#controls button, #mode-selector button, #ui button{padding:4px 6px;font-size:13px;min-width:36px}
	#score-display{font-size:16px;padding:6px 10px}
	#game-over .over-inner{min-width:200px;padding:12px}
	#leaderboard-modal .modal-inner{min-width:280px}
}

/* Tablet / small laptop tweaks */
@media (min-width: 481px) and (max-width: 1024px) {
	:root{--btn-font-size:16px;--btn-icon-size:20px}
	canvas{max-width:720px}
	#controls{left:12px;top:12px}
}

/* Large screens */
@media (min-width: 1025px) {
	:root{--btn-font-size:16px;--btn-icon-size:22px}
	canvas{max-width:960px}
	#controls{left:20px;top:16px}
}

/* prefer transform & opacity for animation perf */
.modal-inner{will-change:transform,opacity}

/* 2026 large-screen refinement pass */
#game-root {
  background:
    radial-gradient(circle at 50% 12%, rgba(125, 211, 247, 0.2), transparent 32%),
    #111;
}

#game-canvas {
  border: 1px solid rgba(255, 255, 255, 0.16);
}

#ready-indicator {
  animation: readyFloat 1200ms ease-in-out infinite;
}

@keyframes readyFloat {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-5px);
  }
}

#game-over .over-inner,
#leaderboard-modal .modal-inner,
#settings-modal .modal-inner {
  width: min(92vw, 460px);
}

@media (max-width: 560px) {
  canvas {
    max-height: calc(100vh - 220px);
  }

  #game-over {
    top: 56%;
  }
}