* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #10161e; 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; transform-origin: center center; flex: none; }
#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: 26px; align-items: center; justify-content: center;
  color: #d8e0e8; font-size: 15px; background: rgba(14, 19, 26, 0.95);
  border-top: 1px solid #34404e; pointer-events: none;
}
#keys .k { display: inline-block; min-width: 26px; padding: 2px 7px; margin-right: 7px; border-radius: 4px;
  background: #efe7d6; color: #26221d; font-weight: 700; text-align: center; font-size: 14px; }
#keys .off { opacity: 0.38; }
#coach {
  position: absolute; left: 40px; right: 40px; bottom: 50px;
  padding: 9px 16px; border-radius: 8px;
  background: #2d4a3a; color: #f4efe2; font-size: 16px; line-height: 1.38;
  border: 2px solid #7fc294; box-shadow: 0 6px 24px rgba(0,0,0,0.45); pointer-events: none;
}
#coach b { color: #a9e6b9; margin-right: 10px; letter-spacing: 1px; font-size: 14px; }
#toast {
  position: absolute; left: 320px; top: 372px; transform: translateX(-50%); white-space: nowrap;
  padding: 8px 16px; border-radius: 6px; background: #f0c75e; color: #26221d; font-size: 16px; font-weight: 600;
  pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}