From a154849b3f8821100d8ebe4f4ca0a5a904ebef72 Mon Sep 17 00:00:00 2001
From: jenstandstad <jens.tandstad@gmail.com>
Date: Sat, 22 Aug 2026 20:17:08 +0200
Subject: [PATCH] Inventory polish: smaller phone/notebook, phone higher,
 auto-open, exit to board
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The phone and notebook render a bit smaller; the phone sits higher on screen;
in-game the handset opens automatically (session mode); and the tool view
gains an EXIT ✕ that closes the inventory straight back to the board.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/inventory.tsx | 1 +
 src/phone.tsx     | 2 +-
 src/styles.css    | 8 +++++---
 3 files changed, 7 insertions(+), 4 deletions(-)

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 <div className="inv-tool">
     <button className="inv-back" onClick={() => setActive(null)}>‹ TOOLS</button>
+    {onClose && <button className="inv-exit" onClick={onClose}>EXIT ✕</button>}
     {active === 'phone' ? <PhonePreview session={session} /> : <NotebookTool playthroughId={session?.playthroughId} onTear={onTearToBoard} />}
   </div>
 
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<Mode>('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; }