html, body { height: 100%; margin: 0; background: #0b0d12; color: #e8e8e8; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
.wrap { height: 100%; display: grid; place-items: center; padding: 16px; }

.hud {
  position: fixed; top: 12px; left: 12px; right: 12px;
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  pointer-events: none; font-weight: 800;
}
.pill {
  display: inline-flex; gap: 10px; align-items: center;
  background: rgba(20, 26, 40, 0.65);
  border: 1px solid rgba(80, 95, 130, 0.45);
  border-radius: 999px; padding: 8px 12px;
  backdrop-filter: blur(6px);
}
.muted { color: #b7c0da; font-weight: 700; }
kbd {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(80,95,130,0.55);
  border-bottom-width: 2px;
  padding: 2px 6px; border-radius: 8px; font-weight: 900;
}

.stage {
  position: relative;
  width: min(900px, 96vw);
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(80, 95, 130, 0.45);
  box-shadow: 0 20px 70px rgba(0,0,0,0.55);
  background: radial-gradient(1200px 600px at 50% 40%, rgba(40,55,95,0.18), rgba(0,0,0,0));
  touch-action: manipulation;
  user-select: none;
}
canvas { width: 100%; height: 100%; display: block; }
#game { filter: blur(var(--blur, 0px)); transform: translateZ(0); will-change: filter; }

.vignette {
  position: absolute; inset: 0;
  background: radial-gradient(closest-side at 50% 50%,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,0.35) 78%,
    rgba(0,0,0,0.65) 100%);
  pointer-events: none;
  opacity: var(--vignette, 0);
  transition: opacity 60ms linear;
}

.overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
.overlay.show { opacity: 1; pointer-events: auto; }

.card {
  width: min(560px, 92%);
  background: rgba(15, 19, 30, 0.75);
  border: 1px solid rgba(80, 95, 130, 0.55);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 20px 70px rgba(0,0,0,0.6);
}
.card h1 { margin: 0 0 8px 0; font-size: 20px; }
.card p { margin: 0 0 12px 0; color: #c7cee6; line-height: 1.4; }
.row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

button {
  cursor: pointer;
  border: 1px solid rgba(80,95,130,0.55);
  background: rgba(25, 31, 48, 0.85);
  color: #e8e8e8;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 900;
}
button:hover { background: rgba(35, 44, 70, 0.9); }
.primary { background: rgba(44, 64, 120, 0.9); border-color: rgba(90, 130, 220, 0.6); }
.primary:hover { background: rgba(56, 80, 150, 0.95); }