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; }