* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #111513; overflow: hidden; }
body { display: flex; align-items: center; justify-content: center; font-family: "Helvetica Neue", Arial, sans-serif; }
#stage { position: relative; width: 1280px; height: 720px; flex: none; transform-origin: center center; }
#game { display: block; width: 1280px; height: 720px; }
[hidden] { display: none !important; }
#keys {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
  display: flex; gap: 18px; align-items: center; justify-content: center;
  color: #ddd3bd; font-size: 15px; background: rgba(16, 20, 18, 0.95);
  border-top: 1px solid #3b443e; pointer-events: none;
}
#keys .k { display: inline-block; min-width: 24px; padding: 2px 7px; margin-right: 6px; border-radius: 4px;
  background: #efe6d2; color: #2a2622; font-weight: 700; text-align: center; font-size: 14px; }
#keys .off { opacity: 0.35; }
#coach {
  position: absolute; left: 842px; top: 640px; width: 426px; transform: translateY(-100%);
  padding: 12px 16px; border-radius: 6px;
  background: #2f4a3a; color: #f4efe2; font-size: 16px; line-height: 1.4;
  border: 2px solid #7fc294; box-shadow: 0 6px 24px rgba(0,0,0,0.45); pointer-events: none;
}
#toast {
  position: absolute; left: 415px; bottom: 54px; transform: translateX(-50%); max-width: 790px;
  padding: 9px 16px; border-radius: 6px; background: #efe6d2; color: #2a2622; font-size: 15px; font-weight: 600;
  pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,0.45); text-align: center;
}