* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #050434;
  overflow: hidden;
  font-family: 'Courier New', monospace;
  color: #fff;
}
canvas { display: block; cursor: crosshair; }
#hud-controls {
  position: fixed; bottom: 14px; left: 14px; z-index: 10;
  font-size: 11px; color: rgba(210,230,255,1); line-height: 1.6;
}
#hud-controls kbd {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  padding: 1px 5px; border-radius: 3px; font-size: 10px;
}
#back-link {
  position: fixed; top: 12px; left: 14px; z-index: 10;
  color: rgba(210,230,255,0.45); text-decoration: none; font-size: 12px;
  font-family: 'Courier New', monospace;
  transition: color 0.2s;
}
#back-link:hover { color: rgba(255,111,219,0.8); }
#sf-lb-link {
  position: fixed; top: 82vh; left: 50%; transform: translateX(-50%);
  z-index: 20; display: none;
  padding: 0.45rem 1.2rem;
  font-family: 'Silkscreen', monospace; font-size: 0.85rem;
  color: #ffd43b;
  border: 1px solid rgba(255,212,59,0.4);
  border-radius: 4px;
  background: rgba(255,212,59,0.08);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
#sf-lb-link:hover {
  background: rgba(255,212,59,0.18);
  border-color: #ffd43b;
  box-shadow: 0 0 10px rgba(255,212,59,0.3);
  color: #fff;
}
#sf-share-wrap {
  position: fixed; top: 82vh; left: 50%; transform: translateX(-50%);
  z-index: 20; display: none;
  margin-top: 2.2rem;
  text-align: center;
}
#sf-share-btn {
  padding: 0.45rem 1.4rem;
  font-family: 'Silkscreen', monospace; font-size: 0.85rem;
  color: #5bf;
  border: 1px solid rgba(85,187,255,0.4);
  border-radius: 4px;
  background: rgba(85,187,255,0.08);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
#sf-share-btn:hover {
  background: rgba(85,187,255,0.18);
  border-color: #5bf;
  box-shadow: 0 0 10px rgba(85,187,255,0.3);
  color: #fff;
}
#sf-copied-msg {
  display: none;
  margin-left: 0.6rem;
  font-family: 'Silkscreen', monospace; font-size: 0.75rem;
  color: #51cf66;
}
#desktop-alert {
  display: none;
}
@media (pointer: coarse) {
  #desktop-alert {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(5,4,52,0.92); border-bottom: 1px solid rgba(255,111,219,0.4);
    padding: 0.7rem 1rem; display: flex; align-items: center; justify-content: center;
    gap: 1rem; font-family: 'Courier New', monospace; font-size: 0.82rem;
    color: rgba(210,230,255,0.85);
  }
}
#desktop-alert span { flex: 1; text-align: center; }
#desktop-alert button {
  background: none; border: 1px solid rgba(255,111,219,0.5); color: rgba(255,111,219,0.9);
  padding: 0.25rem 0.75rem; border-radius: 4px; cursor: pointer;
  font-family: 'Courier New', monospace; font-size: 0.8rem; white-space: nowrap;
  flex-shrink: 0;
}
#desktop-alert button:hover { background: rgba(255,111,219,0.12); }