/* ============================================ PINBALL OVERLAY — sits on top of the drawer's interior when desk-pinball.js boots. The drawer's compartments stay visible underneath (dimmed via .is-pinball on the footer), so the playfield reads as the directory itself. HUD typography: CRT phosphor green to match the existing toad arcade (desk-games.js). ============================================ */ /* Full-screen overlay. Appended to by desk-pinball.js so no ancestor's transform / filter / contain can break position:fixed. Body scroll is locked while the game runs (also handled by JS). */ .tc-pinball { position: fixed; inset: 0; z-index: 10000; background: radial-gradient(ellipse at 50% 35%, rgba(0, 255, 102, 0.05) 0%, transparent 65%), rgba(4, 4, 12, 0.96); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; overflow: hidden; animation: tc-pinball-fade-in 0.35s ease-out; } @keyframes tc-pinball-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Canvas fills the viewport while preserving aspect ratio, letter- boxed if the screen is the "wrong" shape. width caps at either 100vw or whatever 100vh would imply, whichever is smaller — aspect-ratio derives the height. */ .tc-pinball__canvas { display: block; width: min(100vw, calc(100vh * 760 / 460)); max-height: 100vh; aspect-ratio: 760 / 460; background: #0a0814; /* No image-rendering:pixelated — the WebGL (Pixi) renderer wants smooth scaling; the Canvas2D fallback also reads fine antialiased. */ cursor: crosshair; touch-action: none; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); } /* The site applies `cursor: none` globally and uses a JS ink-trail. That makes the pinball canvas un-aimable. Same pattern V0.13 used for the PhotoSwipe lightbox — explicitly restore the cursor on the canvas (and the overlay UI) so the player can see where they are. !important because the global rule sets cursor on every element via universal selectors. */ html.cursor-custom .tc-pinball, html.cursor-custom .tc-pinball *, html.cursor-custom .tc-pinball__canvas { cursor: crosshair !important; } html.cursor-custom .tc-pinball__exit { cursor: pointer !important; } /* CRT-phosphor HUD pinned to the corners of the overlay. */ .tc-pinball__hud { position: absolute; top: 16px; left: 24px; right: 24px; display: flex; align-items: baseline; justify-content: space-between; font-family: 'Courier New', Courier, monospace; color: #00ff66; text-shadow: 0 0 6px rgba(0, 255, 102, 0.6); pointer-events: none; } .tc-pinball__score { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; letter-spacing: 0.04em; } .tc-pinball__ball { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; } .tc-pinball__mult { position: absolute; top: 32px; left: 24px; font-size: 0.95rem; letter-spacing: 0.06em; color: #67e8f9; text-shadow: 0 0 6px rgba(103, 232, 249, 0.7); text-transform: uppercase; } /* Banner — transient messages (multipliers, unlocks, tilts, game-over). */ .tc-pinball__banner { position: absolute; top: 64px; left: 50%; transform: translateX(-50%) translateY(-6px); padding: 10px 18px; background: rgba(8, 8, 16, 0.88); color: #e7c98f; font-family: Georgia, "Iowan Old Style", serif; font-style: italic; font-size: clamp(0.85rem, 1.6vw, 1rem); border: 1px solid rgba(231, 201, 143, 0.4); border-radius: 3px; text-align: center; max-width: 80%; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); } .tc-pinball__banner.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* Exit button — top-right corner of the overlay. */ .tc-pinball__exit { position: absolute; top: 12px; right: 16px; width: 32px; height: 32px; appearance: none; background: rgba(20, 12, 8, 0.7); border: 1px solid rgba(231, 201, 143, 0.4); border-radius: 50%; color: #e7c98f; font-size: 1.2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.18s ease, transform 0.18s ease; } .tc-pinball__exit:hover, .tc-pinball__exit:focus-visible { background: rgba(40, 24, 16, 0.9); border-color: #22d3ee; color: #ffffff; transform: rotate(90deg); outline: none; } /* Bottom-edge hint — controls. */ .tc-pinball__hint { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-family: 'Courier New', Courier, monospace; font-size: 0.72rem; letter-spacing: 0.06em; color: rgba(0, 255, 102, 0.55); text-transform: uppercase; pointer-events: none; white-space: nowrap; } .tc-pinball__hint strong { color: #00ff66; font-weight: 700; } /* Marble button's brief "loading" state while Matter.js downloads. */ .tc-drawer__marble.is-loading { animation: tc-drawer-marble-loading 0.9s linear infinite; } @keyframes tc-drawer-marble-loading { 0%, 100% { transform: scale(1.05) rotate(0deg); } 50% { transform: scale(1.18) rotate(180deg); } } /* Narrow viewports: the table needs landscape room. Show a notice. */ @media (max-width: 560px) and (orientation: portrait) { .tc-pinball::before { content: 'rotate to play'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Courier New', Courier, monospace; font-size: 1rem; letter-spacing: 0.08em; color: #00ff66; text-shadow: 0 0 6px rgba(0, 255, 102, 0.6); text-transform: uppercase; background: rgba(4, 4, 12, 0.92); z-index: 2; } }