diff --git a/src/inventory.tsx b/src/inventory.tsx
index 7f69a79..8d53806 100644
--- a/src/inventory.tsx
+++ b/src/inventory.tsx
@@ -91,6 +91,7 @@ export function Inventory({ onClose, session, onTearToBoard }: { onClose?: () =>
if (active) return
+ {onClose &&
}
{active === 'phone' ?
:
}
diff --git a/src/phone.tsx b/src/phone.tsx
index 929f5d5..dfc46c3 100644
--- a/src/phone.tsx
+++ b/src/phone.tsx
@@ -269,7 +269,7 @@ function PhoneScreen({ visible, mode, dialed, callee }: { visible: boolean; mode
export type PhoneSession = { playthroughId: string; onConnect: () => void }
export function PhonePreview({ session }: { session?: PhoneSession } = {}) {
- const [open, setOpen] = useState(false)
+ const [open, setOpen] = useState(Boolean(session)) // in-game the handset opens on its own
const [screenOn, setScreenOn] = useState(false)
const [mode, setMode] = useState('home')
const [dialed, setDialed] = useState('')
diff --git a/src/styles.css b/src/styles.css
index e8c336f..b5d653a 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -715,11 +715,11 @@ button:focus-visible { outline: 2px solid #e99a44; outline-offset: 2px; }
.audio-toggle.muted { color: #5f7b73; text-decoration: line-through; }
/* === 90s handset spike (src/phone.tsx) ============================ */
-.phone-backdrop { position: fixed; inset: 0; z-index: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
+.phone-backdrop { position: fixed; inset: 0; z-index: 500; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; padding-top: 3vh;
background: radial-gradient(120% 90% at 50% 30%, #10201c 0%, #060b0a 70%, #020403 100%); }
/* Fixed 1:2 portrait stage. The 3D scene and the DOM screen both live here, so
percentages resolve against the same box at every size. */
-.phone-stage { position: relative; height: min(88vh, 720px); aspect-ratio: 1 / 2; max-width: 92vw; }
+.phone-stage { position: relative; height: min(72vh, 600px); aspect-ratio: 1 / 2; max-width: 92vw; }
.phone-canvas { position: absolute; inset: 0; }
/* The interactive screen, positioned in % of the stage over the 3D glass. */
.phone-screen { position: absolute; box-sizing: border-box; padding: 4% 6%; overflow: hidden;
@@ -785,9 +785,11 @@ button:focus-visible { outline: 2px solid #e99a44; outline-offset: 2px; }
.inv-tool { position: fixed; inset: 0; z-index: 500; }
.inv-back { position: absolute; top: 16px; left: 18px; z-index: 520; border: 1px solid #6f8f85; background: #0a211de6; color: #cdea6a; font-family: ui-monospace, monospace; letter-spacing: 1px; padding: 6px 14px; cursor: pointer; }
.inv-back:hover { border-color: #cdea6a; }
+.inv-exit { position: absolute; top: 16px; right: 18px; z-index: 520; border: 1px solid #6f8f85; background: #0a211de6; color: #cfe8df; font-family: ui-monospace, monospace; letter-spacing: 1px; padding: 6px 14px; cursor: pointer; }
+.inv-exit:hover { border-color: #e7b57e; color: #e7b57e; }
/* notebook tool (placeholder) */
.notebook { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 30%, #1c1a12 0%, #0a0906 75%); }
-.notebook-page { width: min(560px, 88vw); height: min(72vh, 720px); background: repeating-linear-gradient(#f4ecd6 0 30px, #e3d8b8 30px 31px); box-shadow: 0 20px 60px #0009; padding: 26px 30px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
+.notebook-page { width: min(460px, 84vw); height: min(64vh, 600px); background: repeating-linear-gradient(#f4ecd6 0 30px, #e3d8b8 30px 31px); box-shadow: 0 20px 60px #0009; padding: 22px 26px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.notebook-head { font: 700 13px IBM Plex Mono, monospace; letter-spacing: 3px; color: #6a5a3a; }
.notebook-empty { font: 22px/1.3 "Reenie Beanie", cursive; color: #8a7a52; }
.notebook-add { display: flex; gap: 8px; align-items: flex-end; border-bottom: 1px dashed #c8b98f; padding-bottom: 10px; }