diff --git a/src/components/ui/InteractPrompt.tsx b/src/components/ui/InteractPrompt.tsx
index 56d21db..dcc634f 100644
--- a/src/components/ui/InteractPrompt.tsx
+++ b/src/components/ui/InteractPrompt.tsx
@@ -9,10 +9,14 @@ export function InteractPrompt(): React.JSX.Element | null {
if (cameraMode !== "player") return null;
if (!focused || holding || focused.kind !== "trigger") return null;
+ const label = focused.label?.trim() ?? "";
+
return (
{INTERACT_KEY.toUpperCase()}
- {focused.label}
+ {label.length > 0 ? (
+ {label}
+ ) : null}
);
}
diff --git a/src/index.css b/src/index.css
index 2f25d5c..5a347ec 100644
--- a/src/index.css
+++ b/src/index.css
@@ -813,41 +813,43 @@ canvas {
left: 50%;
transform: translateX(-50%);
display: flex;
- align-items: center;
- gap: 12px;
+ align-items: stretch;
+ gap: 8px;
pointer-events: none;
z-index: 10;
}
-.interact-prompt__key {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: 64px;
- height: 64px;
- background: rgba(255, 255, 255, 0.92);
- border-radius: 12px;
- box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
- font-family: "Inter", sans-serif;
- font-size: 32px;
- font-weight: 900;
- font-style: normal;
- color: #0a0a0a;
- letter-spacing: 0;
-}
-
+.interact-prompt__key,
.interact-prompt__label {
display: inline-flex;
align-items: center;
- padding: 16px 24px;
- background: rgba(255, 255, 255, 0.92);
- border-radius: 12px;
- box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
+ justify-content: center;
+ height: 36px;
+ background: rgba(10, 12, 20, 0.55);
+ border: 1px solid rgba(255, 255, 255, 0.7);
font-family: "Inter", sans-serif;
- font-size: 22px;
+ color: #ffffff;
+}
+
+.interact-prompt__key {
+ width: 36px;
+ font-size: 15px;
font-weight: 900;
- color: #0a0a0a;
+ font-style: normal;
letter-spacing: 0;
+ /* 3D keyboard key effect: top highlight, bottom inner darkening,
+ and a thin bottom drop so the key reads as physically pressed-up. */
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, 0.25),
+ inset 0 -3px 0 rgba(0, 0, 0, 0.45),
+ 0 2px 0 rgba(0, 0, 0, 0.55);
+}
+
+.interact-prompt__label {
+ padding: 0 12px;
+ font-size: 13px;
+ font-weight: 700;
+ letter-spacing: 0.02em;
line-height: 1;
}