:root {
  --bg: #0c0d10;
  --panel: #151821;
  --text: #e9ecf1;
  --muted: #99a1b3;
  --accent: #6ee7ff;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1000px 600px at 70% -10%, #1e2330, #10131a 40%, var(--bg) 70%);
  overflow: hidden;
}

.app { max-width: 920px; margin: 0 auto; padding: 16px; height: 100vh; display: flex; flex-direction: column; }
.header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.header h1 { font-weight: 700; letter-spacing: 0.5px; margin: 0; }
.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.control { display: flex; gap: 8px; align-items: center; background: var(--panel); padding: 8px 10px; border-radius: 10px; }
.control.inline { background: transparent; padding: 0; }
label { color: var(--muted); font-size: 12px; }
input[type="text"] { background: #0e1118; border: 1px solid #232a3a; color: var(--text); padding: 6px 8px; border-radius: 8px; min-width: 160px; }
button { background: #1a2233; color: var(--text); border: 1px solid #33405a; border-radius: 8px; padding: 6px 10px; cursor: pointer; }
button:hover { background: #1f2940; border-color: #3e4f70; }

.main { display: grid; grid-template-columns: 1fr 220px; gap: 16px; margin-top: 16px; flex: 1; min-height: 0; }
#game { width: auto; height: 100%; background: #0d0f14; border: 2px solid #242a39; border-radius: 12px; image-rendering: pixelated; image-rendering: crisp-edges; }

.sidebar { background: var(--panel); padding: 12px; border-radius: 12px; display: grid; gap: 12px; align-content: start; overflow: auto; }
.stat { display: flex; justify-content: space-between; color: var(--muted); }
.leaderboard ol, .leaderboard ul { margin: 8px 0 0; padding-left: 18px; }
.leaderboard li { color: var(--text); opacity: 0.9; }
.next { display: grid; gap: 8px; }
#next { width: 100%; height: auto; background: #0d0f14; border: 1px solid #242a39; border-radius: 8px; image-rendering: pixelated; image-rendering: crisp-edges; }
.help ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }

@media (max-width: 760px) {
  .main { grid-template-columns: 1fr; }
  #game { width: 100%; height: auto; }
}

.modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.5); }
.modal.hidden { display: none; }
.modal .card { width: min(92vw, 360px); background: #141826; border: 1px solid #27324a; color: var(--text); border-radius: 12px; padding: 16px; display: grid; gap: 10px; }
.modal .actions { display: flex; justify-content: end; gap: 8px; }

.modal .card { position: relative; overflow: hidden; }
.video-backdrop {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.18;
  pointer-events: none;
}



.mobile-controls {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 12px env(safe-area-inset-right) calc(12px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(10,12,18,0.9) 12%, rgba(10,12,18,0.95) 100%);
  backdrop-filter: blur(6px);
}
.mobile-controls button {
  height: 52px;
  font-size: 20px;
  border: 1px solid #33405a;
  background: #1a2233;
  color: var(--text);
  border-radius: 10px;
}

@media (min-width: 900px) {
  .mobile-controls { display: none; }
}