/* GemBuddy Simulator styles. Pixel-art rendering, faux T-Display S3 chassis. */ :root { /* --scale is the (possibly fractional) multiplier the native 320x170 screen is drawn at. Default is viewport-derived by sim.js on boot and on every resize (see updateAutoScale()). Mobile-first: at a 375 px viewport it resolves to ~1.0, at 768 px to ~2.25, at 1200+ px it caps near 3.0. The dev scale-row (1/2/3/4x, ?debug=1 only) sets --scale inline on the chassis to force a fixed value while a manual override is in effect; resizing clears that override. */ --scale: 2; --gem-color: #9440C4; --bg: #181820; --fg: #E6E6F0; --panel: #20202c; --accent: #F0C440; } * { box-sizing: border-box; } html, body { background: var(--bg); color: var(--fg); font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; margin: 0; padding: 0; min-height: 100vh; } img { image-rendering: pixelated; image-rendering: crisp-edges; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-bottom: 1px solid #333; background: #14141c; } .topbar h1 { margin: 0; font-size: 16px; font-weight: 700; } .topbar small { font-size: 11px; opacity: 0.6; margin-left: 6px; } .topbar-title { display: flex; flex-direction: column; gap: 2px; } .help-btn { background: #2a2a36; color: var(--accent); border: 1px solid #444; border-radius: 6px; padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; margin-left: auto; /* F-0039 (U2): meet the 44 x 44 CSS px tap-target floor at the 320 px viewport. The default padding renders ~27 px tall, which the test_tap_targets sweep flags. */ min-width: 44px; min-height: 44px; } .help-btn:hover { background: #3a3a48; border-color: var(--accent); } .help-btn:active { background: var(--accent); color: #000; } .fullscreen-btn { margin-left: 8px; } /* Sim-only Settings shortcut button: shares the .help-btn shell so all hover/active/min-tap-target rules apply unchanged. margin-left mirrors .fullscreen-btn so the three topbar buttons (Controls / Settings / Fullscreen) sit evenly spaced. */ .settings-btn { margin-left: 8px; } .tagline { margin: 0 0 0 76px; font-size: 11px; font-weight: 400; color: #c0c0d0; opacity: 0.75; letter-spacing: 0.02em; white-space: nowrap; } /* Narrow-viewport topbar: let the title wrap and unpin the tagline so it stops forcing horizontal overflow on phones < 420 CSS px wide. */ @media (max-width: 420px) { .topbar { padding: 6px 10px; flex-wrap: wrap; gap: 4px; } .topbar h1 { font-size: 14px; } .topbar h1 img { max-height: 40px !important; margin-right: 6px !important; } .tagline { margin-left: 0; white-space: normal; font-size: 10px; } } /* Dev-only chrome: hidden by default; ?debug=1 adds .debug-mode to which un-hides anything tagged .dev-only. Keeps the public-facing site free of dev affordances without deleting the controls. */ .dev-only { display: none !important; } body.debug-mode .dev-only { display: flex !important; } body.debug-mode aside.dev-only { display: block !important; } .scale-row { display: flex; gap: 6px; align-items: center; font-size: 12px; } .scale-row button { background: #2a2a38; color: var(--fg); border: 1px solid #444; padding: 4px 10px; cursor: pointer; font-family: inherit; font-size: 12px; } .scale-row button:hover { background: #3a3a48; } .scale-row button.active { background: var(--accent); color: #000; border-color: var(--accent); } .scale-row .crt-label { display: flex; align-items: center; gap: 4px; } .layout { display: flex; gap: 24px; padding: 24px 12px; align-items: flex-start; justify-content: center; flex-wrap: wrap; } /* Chassis column: chassis + share-bar + gem-badge stack. Centered, no overflow. The chassis itself is clip-pathed; chrome below lives outside the clip so it isn't cropped. */ .chassis-column { display: flex; flex-direction: column; align-items: center; max-width: 100%; } /* Faceted-gem chassis around the screen. -------------------------------------- 8-facet octagonal emerald cut, mirroring F-0018's physical front shell (facet_count=8, modified emerald, stepped table). Screen is centered horizontally between left and right padding bands; A/B caps sit in the left band on the short edge, stacked vertically. F-0019 supersedes F-0016's wider-left asymmetric padding. */ .chassis { background: var(--gem-color); /* 8-vertex landscape octagon: rectangle with 45-deg corner chamfers at ~15% inset. Mirrors F-0018's emerald-cut front shell and the SVG facet overlay polygon in index.html. Coordinates are percentages of the chassis box. Reads as "modified emerald cut" not "rounded rectangle". */ clip-path: polygon( 8% 0%, 92% 0%, 100% 15%, 100% 85%, 92% 100%, 8% 100%, 0% 85%, 0% 15% ); /* Landscape padding (F-0019 + F-0021): symmetric left/right so the screen sits at the horizontal centre of the chassis. The band must be wide enough to hold the stacked A/B button column on the left short edge WITHOUT the button right edge overlapping the screen- frame; the matching right band is empty bezel. F-0021 (2026-05-16): tightened left/right padding from calc(120 + 60*scale) to calc(50 + 28*scale). Sizing rationale: each .dev-btn is 44+20*scale = 104 px wide at scale=3 (44 px WCAG floor at scale=1); button centre sits at left:6% of the chassis. To keep button right-edge clear of screen-frame left at scale=3 we need padding >= 126 px; using 134 px gives ~8 px visual margin. Math at scale=3: left + right = 2 * (50 + 84) = 268 px screen-frame = 320*3 + 16 = 976 px sim_w = 268 + 976 = 1244 px sim_h = (40+54) + (28+36) + (170*3 + 16) = 684 px aspect = 1244 / 684 = 1.82 Parity check (at scale=1, with raw 320x170 screen, NO frame border allowance per the check's math): left + right = 2 * (50 + 28) = 156 px sim_w = 156 + 320 = 476 px sim_h = 58 + 40 + 170 = 268 px sim_h / sim_w = 0.563 case egg_w/egg_h = 60/100 = 0.6 delta = (0.6 - 0.563) / 0.6 = 6.2% (well under 20% tolerance). The +/-20% parity tolerance lets us trade a perfect 1.67 aspect match for an actually-usable button band; case landscape stays 1.67 (set by SCAD egg_h = 100), sim chassis lands at 1.82. */ padding: calc(40px + 18px * var(--scale)) /* top: apex + LED */ calc(50px + 28px * var(--scale)) /* right: matches left, centres screen */ calc(28px + 12px * var(--scale)) /* bottom: clean facet */ calc(50px + 28px * var(--scale)); /* left: button band (must clear button right edge) */ box-shadow: inset 0 -12px 30px rgba(0,0,0,0.45), inset 0 12px 30px rgba(255,255,255,0.18), 0 8px 30px rgba(0,0,0,0.55); position: relative; width: max-content; /* No max-width: 100% here on purpose. Auto-scale (sim.js) keeps the chassis inside the viewport for the default mobile-first scale; the dev scale-row buttons (?debug=1) can force a scale that overflows, and in that mode we accept horizontal scroll rather than letting the screen-frame poke through the polygon hull. */ transition: background 0.4s ease; /* Subtle radial highlight to suggest a curved cabochon face. Sits beneath everything via z-index. */ background-image: radial-gradient(ellipse at 50% 18%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 40%), radial-gradient(ellipse at 50% 85%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 50%); } .chassis::before { /* Apex shimmer at the top facet -- preserves the "polished gem" look from the egg version. F-0019 landscape octagon's top edge runs from x=8%-92%; centre the shimmer at x=50% a few px below the top edge. */ content: ""; position: absolute; top: calc(4px + 4px * var(--scale)); left: 50%; transform: translateX(-50%); width: 60px; height: 14px; background: rgba(255,255,255,0.4); border-radius: 50%; filter: blur(2px); pointer-events: none; z-index: 2; } /* SVG overlay drawing the facet edge lines. Stretched to the chassis box; clip-path on .chassis crops anything outside the polygon, so the overlay's stroke draws ON the polygon boundary. */ .facet-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; display: none; } .chassis[data-case="emerald"] .facet-overlay--emerald, .chassis:not([data-case]) .facet-overlay--emerald, .chassis[data-case="diamond"] .facet-overlay--diamond, .chassis[data-case="tourmaline"] .facet-overlay--tourmaline { display: block; } .led { position: absolute; /* F-0019 octagon: the upper-right corner chamfer runs from (92,0) to (100,15), so the LED needs to clear that diagonal facet edge. ~10-16 px down + ~20-30 px in keeps it safely inside the upper-right chamfer. */ top: calc(10px + 6px * var(--scale)); right: calc(20px + 10px * var(--scale)); width: 8px; height: 8px; border-radius: 50%; background: #5fff5f; box-shadow: 0 0 8px #5fff5f, 0 0 2px #ffffffa0; z-index: 3; } .screen-frame { background: #000; padding: 8px; border-radius: 4px; border: 2px solid #1a1a1a; width: calc(320px * var(--scale) + 16px); height: calc(170px * var(--scale) + 16px); } .screen { width: 320px; height: 170px; background: #0a0a14; position: relative; overflow: hidden; transform: scale(var(--scale)); transform-origin: top left; image-rendering: pixelated; /* The procedural #bg-canvas now paints the full screen background (sky, mountains, sun/moon, clouds). The solid color above is a fallback for the brief moment before the canvas paints its first frame and during overlay states that hide the world. The prior tile-grid + radial-gradient backdrop was retired -- it doesn't compose well with the time-of-day sky and the parallax mountains already provide horizon depth. */ } #bg-canvas { position: absolute; inset: 0; width: 320px; height: 170px; image-rendering: pixelated; pointer-events: none; z-index: 0; } /* CRT scanline overlay */ .screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(0,0,0,0.18) 0 1px, rgba(0,0,0,0) 1px 3px ); mix-blend-mode: multiply; } .screen.crt-off::after { display: none; } /* Accessibility: respect prefers-reduced-motion. Users who opted out of motion at the OS level get a clean screen with no scanline overlay -- the scanline is decorative and can cause visual discomfort even though it's a static gradient (no animation). The dev-only CRT toggle still works to override this in either direction. (F-0022 / U5 follow-up.) */ @media (prefers-reduced-motion: reduce) { .screen::after { display: none; } } .screen.dim { filter: brightness(0.5) saturate(0.7); } .screen.flash-red { box-shadow: inset 0 0 0 4px #E83C3C; } /* Top bar inside screen */ .top-bar { position: absolute; top: 0; left: 0; right: 0; height: 24px; display: flex; gap: 6px; align-items: center; padding: 4px 6px; background: rgba(0,0,0,0.4); } .ministat { display: flex; align-items: center; gap: 3px; flex: 1; } .ministat .lbl { font-size: 8px; font-weight: 700; color: #ddd; width: 8px; text-align: center; } .ministat .bar { flex: 1; height: 8px; background: #000; border: 1px solid #444; position: relative; } .ministat .fill { height: 100%; background: #6f6; transition: width 0.2s linear; } .fill.h { background: #FC9840; } .fill.j { background: #EC50C8; } .fill.e { background: #58DCE8; } .fill.c { background: #98C4E8; } .battery { display: flex; align-items: center; } .batt-body { width: 16px; height: 8px; border: 1px solid #ddd; padding: 1px; } .batt-fill { width: 100%; height: 100%; background: #6f6; } .batt-tip { width: 2px; height: 4px; background: #ddd; margin-left: 1px; } /* Stage / character area */ .stage { position: absolute; left: 0; right: 0; top: 24px; bottom: 40px; display: flex; align-items: center; justify-content: center; } .char { position: absolute; left: 50%; top: 50%; width: 128px; height: 128px; transform: translate(-50%, -50%); pointer-events: none; } .bubble { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); max-width: 240px; background: #fff; color: #000; padding: 4px 6px; border: 2px solid #000; border-radius: 4px; font-size: 9px; line-height: 1.2; text-align: center; word-wrap: break-word; pointer-events: none; opacity: 0; transition: opacity 0.2s; /* Above the mood-canvas (z-index 20 in sim.js::renderFaceOverlay) so quip text reads correctly when the gem's eyes/brows would otherwise overlap the bubble's bottom edge. Coin-flash (60) and birthday overlay (50) already sit above; this brings the speech bubble into the same stacking layer. */ z-index: 30; } /* Action bar */ .action-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 40px; display: flex; gap: 4px; padding: 4px 6px; align-items: center; background: rgba(0,0,0,0.5); overflow: hidden; } .action-cell { width: 32px; height: 32px; flex-shrink: 0; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); /* F-0059: action-cells are click/tap targets in the browser sim (firmware is button-only). Cursor + a subtle hover hint advertise the affordance without altering the canvas-perfect look. */ cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .action-cell:hover { background: rgba(255,255,255,0.12); } .action-cell:active { background: rgba(240,196,64,0.3); } .action-cell img { width: 32px; height: 32px; display: block; pointer-events: none; } .action-cell.selected { border-color: var(--accent); background: rgba(240,196,64,0.2); } /* COULD C1 (sim mirror): floating label above the bar for the selected slot. */ .action-label { position: absolute; bottom: 42px; transform: translateX(-50%); background: rgba(0,0,0,0.85); color: var(--accent); font-size: 9px; line-height: 1; padding: 2px 4px; white-space: nowrap; pointer-events: none; display: none; } /* Overlays inside the screen */ .overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.75); color: #fff; font-size: 10px; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 8px; text-align: center; } .overlay .title { font-weight: 700; font-size: 12px; margin-bottom: 6px; } .overlay .hint { opacity: 0.6; font-size: 8px; margin-top: 8px; } .splash-text { font-size: 11px; padding: 6px; } #splash-text { white-space: pre-line; } .stats-name { font-weight: 700; color: var(--accent); margin-bottom: 6px; font-size: 12px; } .death .tomb { font-size: 28px; font-weight: 900; color: #B4B4B4; border: 3px solid #B4B4B4; padding: 4px 14px; border-radius: 12px 12px 0 0; margin-bottom: 8px; } /* H3 polish: real SPRITE_DEAD tombstone art (64x64 source, scaled with pixelated rendering to match the device look). */ .death .tomb-img { width: 64px; height: 64px; image-rendering: pixelated; image-rendering: crisp-edges; margin-bottom: 8px; } .death-text { max-width: 220px; } /* SETTINGS holds 14+ rows but #screen is 170 native px tall with overflow: hidden, so the default `.overlay { justify-content: center }` clips the top AND bottom rows out of reach. F-0024 trapped Tab focus inside the panel, which made the clip user-visible (focus moved to rows the user couldn't see). Anchor at the top and scroll vertically so every control is reachable by mouse, touch, AND keyboard. */ .overlay.settings { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; } .settings label { display: block; margin: 4px 0; font-size: 10px; } .settings input[type=range] { width: 200px; } .settings button { background: #E83C3C; color: white; border: none; padding: 4px 10px; cursor: pointer; font-family: inherit; font-size: 10px; margin-top: 6px; } .share-row { display: flex; gap: 8px; align-items: center; margin: 6px 0; } .share-status { font-size: 11px; opacity: 0; transition: opacity 200ms; } .share-status.show { opacity: 1; } /* SETTINGS legend rows (controls + bar meanings). Compact, two-column. */ .settings .legend-row { font-size: 10px; line-height: 1.35; margin: 3px 0 5px 0; display: flex; gap: 6px; flex-wrap: wrap; } .settings .legend-row strong { font-weight: 600; opacity: 0.85; } .settings .legend-row span { opacity: 0.9; } /* Preset picker submenu inside SETTINGS. */ .settings-version { margin-top: 6px; font-size: 9px; opacity: 0.5; font-family: ui-monospace, monospace; } .settings-version a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; } .settings .presets-row { margin: 6px 0 4px 0; } .settings .presets-list { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; padding-left: 4px; max-height: 220px; overflow-y: auto; } .settings .presets-list button { background: #303040; color: #f0f0f0; border: 1px solid #4a4a55; padding: 4px 8px; font-size: 10px; margin: 0; text-align: left; cursor: pointer; font-family: inherit; } .settings .presets-list button:hover { background: #404055; } .settings .presets-list .preset-tagline { display: block; font-size: 9px; opacity: 0.65; margin-top: 1px; } /* Tutorial overlay (first-hatch controls card). Same look as STATS panel. */ .overlay.tutorial { flex-direction: column; align-items: stretch; padding: 14px 18px; gap: 0; text-align: left; } .tutorial-title { font-size: 14px; font-weight: 600; text-align: center; margin-bottom: 8px; letter-spacing: 0.5px; } .tutorial-row { display: flex; gap: 10px; align-items: baseline; font-size: 11px; line-height: 1.45; margin: 2px 0; } .tutorial-key { display: inline-block; min-width: 52px; background: #303040; border: 1px solid #4a4a55; padding: 1px 5px; font-size: 10px; font-family: monospace; text-align: center; } /* Always-visible action-name strip below the chassis. Reads the currently-highlighted action-bar slot so touch users (where hover titles never fire) can see what each icon means. */ .action-label { margin: 10px auto 0; padding: 4px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; min-width: 80px; text-align: center; } .action-label.locked { /* EGG-stage actions are gated to STATS / QUIP per spec; signal this on the label rather than leaving the user to bonk into the egg quip. */ color: #888; opacity: 0.7; border-color: rgba(255,255,255,0.04); } /* Visible Share affordance below the chassis */ .share-bar { display: flex; gap: 10px; align-items: center; justify-content: center; /* Breathing room below the cabochon's lower apex facet. (F-0014 had bumped this for the portrait chassis; F-0016 superseded but kept the spacing because it still reads cleanly under the landscape chassis.) */ margin-top: 36px; padding: 0 8px; flex-wrap: wrap; } .share-main-btn { background: var(--accent); color: #000; border: 2px solid var(--accent); border-radius: 6px; padding: 10px 22px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 3px 0 rgba(0,0,0,0.35), 0 2px 10px rgba(240,196,64,0.25); transition: transform 0.08s ease, box-shadow 0.08s ease; /* F-0039 (U2): meet the 44 x 44 CSS px tap-target floor. The default padding renders ~38 px tall on small viewports, which the test_tap_targets sweep flags. */ min-width: 44px; min-height: 44px; } .share-main-btn:hover { background: #fdd96a; border-color: #fdd96a; } .share-main-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.35), 0 1px 6px rgba(240,196,64,0.25); } .share-bar .share-status { font-size: 12px; color: var(--fg); } /* Persistent gem identity badge */ .gem-badge { margin: 10px auto 0; padding: 4px 10px; font-size: 11px; font-family: inherit; color: #d8d8e4; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; text-align: center; letter-spacing: 0.04em; width: max-content; max-width: 100%; } .minigame { background: transparent; padding: 0; } .minigame canvas { width: 320px; height: 170px; image-rendering: pixelated; } /* Buttons (dev). Absolutely positioned to match the physical case button caps. F-0011 places the caps in the FRONT shell at face-up SMD tactile switch locations (LCD-side face, near the USB-C short edge). F-0006's edge-mount approach was retracted; F-0011 restored F-0003's face-up topology. The simulator renders them as half-pills emerging from the chassis's left short edge: flat right edge sits against the notional case wall, rounded dome bulges out toward the user. This mirrors the edge-mount visual model -- not face buttons. F-0019 keeps F-0016's left-short-edge stacking but rebalances the chassis to symmetric padding (8-facet octagonal emerald cut, mirroring F-0018's physical front shell). The screen is centered horizontally between left and right padding bands; A/B caps still sit in the left band on the short edge, stacked vertically with centres at 35% / 65% and USB-C nominally between them. */ .dev-btn.btn-a-pos { position: absolute; left: 6%; top: 35%; transform: translate(-50%, -50%); /* Rounded left, flat right: looks like a cap emerging from a slot in the case wall. The dome faces the user (out to the left); the flat side meets the (notional) edge of the case. */ border-radius: 50% 0 0 50%; border-right: 2px solid rgba(0, 0, 0, 0.6); } .dev-btn.btn-b-pos { position: absolute; left: 6%; top: 65%; transform: translate(-50%, -50%); border-radius: 50% 0 0 50%; border-right: 2px solid rgba(0, 0, 0, 0.6); } /* Pressing the button shifts it down by 1px while preserving the centering transform set above (otherwise the .dev-btn:active rule below would reset position back to translateY(1px) and recenter to top-left). */ .dev-btn.btn-a-pos:active, .dev-btn.btn-b-pos:active { transform: translate(-50%, calc(-50% + 1px)); } .dev-btn { background: #2a2a36; color: #fff; border: 2px solid #444; border-radius: 50%; /* X3: scale with the chassis --scale (default 2), 44 px WCAG floor. At scale=1 -> 64 px (matches prior). At autoscale 0.6 -> 56 px. The btn-a-pos / btn-b-pos rules above override border-radius to give the half-pill cap look. */ width: calc(44px + 20px * var(--scale)); height: calc(44px + 20px * var(--scale)); min-width: 44px; min-height: 44px; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.4); } .dev-btn:active { transform: translateY(1px); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.4); } .dev-btn .key { font-weight: 700; font-size: 18px; } .dev-btn .hint { position: absolute; bottom: -22px; white-space: nowrap; font-size: 9px; color: #aaa; /* Hidden by default: the tutorial overlay (PR #4) covers controls on first hatch, and these hints would otherwise be clipped by the chassis polygon's bottom facets. ?debug=1 reveals them again. */ display: none; } body.debug-mode .dev-btn .hint { display: block; } .dev-btn.glow-short { background: #4a4a60; box-shadow: 0 0 10px rgba(255,255,255,0.4); } .dev-btn.glow-long { background: var(--accent); color: #000; box-shadow: 0 0 18px var(--accent); } /* Debug panel */ .debug-panel { background: var(--panel); border: 1px solid #333; padding: 12px; width: 360px; font-size: 12px; border-radius: 4px; flex-shrink: 0; } .debug-panel h2 { margin-top: 0; font-size: 13px; } .debug-panel .row { margin: 8px 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .debug-panel button { background: #2a2a38; color: var(--fg); border: 1px solid #444; padding: 4px 8px; cursor: pointer; font-family: inherit; font-size: 11px; } .debug-panel button:hover { background: #3a3a48; } .dbg-state { background: #0a0a10; color: #98C4E8; padding: 8px; max-height: 240px; overflow: auto; font-size: 10px; line-height: 1.3; white-space: pre; border: 1px solid #333; border-radius: 3px; } #dbg-simsec { font-family: ui-monospace, monospace; font-size: 10px; color: #aaa; } @media (max-width: 1100px) { .layout { flex-direction: column; } .debug-panel { width: 100%; } } /* =========================================================================== Chassis style variants (sim-only cosmetic; firmware is unchanged). The default .chassis rules above describe the EMERALD case (case/gemmagotchi_case.scad). The attribute-scoped overrides below re-skin the chassis to the diamond and tourmaline cases without touching the baseline block -- the P1 case-sim parity check only inspects the un-attributed .chassis rule, so the emerald baseline continues to match case/gemmagotchi_case.scad. The 320x170 screen-frame stays the same physical size in all three cases; only the surrounding polygon, padding, and A/B button band positions change. =========================================================================== */ /* Diamond: 4-vertex rotated-square / kite. Buttons sit side-by-side on the lower facet, mirroring case/gemmagotchi_diamond_case.scad's btn_x = +/-10.0 mm (F-0039, was +/-10.5 under F-0038) / btn_y = -27.1 mm (both caps on the lower half of the front face, horizontally paired). Horizontal padding is ~1.9x vertical so the screen fits along the wider diagonal of the rhombus (constraint: w/W + h/H <= 1 for a centred rectangle inside a rhombus with axis-aligned diagonals). */ .chassis[data-case="diamond"] { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); padding: calc(10px + 100px * var(--scale)) calc(10px + 190px * var(--scale)) calc(10px + 100px * var(--scale)) calc(10px + 190px * var(--scale)); } .chassis[data-case="diamond"] .dev-btn.btn-a-pos, .chassis[data-case="diamond"] .dev-btn.btn-b-pos { /* Reset the emerald half-pill shape: diamond caps sit face-up on the LCD face (per the SCAD), not emerging from a side wall. */ border-radius: 50%; border-right: 2px solid #444; } .chassis[data-case="diamond"] .dev-btn.btn-a-pos { left: 38%; top: 72%; } .chassis[data-case="diamond"] .dev-btn.btn-b-pos { left: 62%; top: 72%; } /* Tourmaline: portrait elongated hexagon (flat top/bottom, pointed left/right). Buttons sit side-by-side below the screen, mirroring case/gemmagotchi_tourmaline_case.scad's btn_xy_pcb = +/-10.0 mm (F-0039, was +/-10.5 under F-0038) (horizontal cap pair) at btn_case_z = -25.25 (below LCD viewport centre, on the +X LCD face). Padding is portrait: top/bottom pad is ~3.3x left/right pad at scale=1 so the silhouette reads as a stretched gem column. */ .chassis[data-case="tourmaline"] { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); padding: calc(80px + 120px * var(--scale)) calc(20px + 40px * var(--scale)) calc(80px + 120px * var(--scale)) calc(20px + 40px * var(--scale)); } .chassis[data-case="tourmaline"] .dev-btn.btn-a-pos, .chassis[data-case="tourmaline"] .dev-btn.btn-b-pos { border-radius: 50%; border-right: 2px solid #444; } .chassis[data-case="tourmaline"] .dev-btn.btn-a-pos { left: 30%; top: 80%; } .chassis[data-case="tourmaline"] .dev-btn.btn-b-pos { left: 70%; top: 80%; } /* Standard Fullscreen API styling. .chassis-column is the requestFullscreen target so the topbar drops out while the device frame fills the viewport. Centre the chassis in the now-larger viewport. (Note: :fullscreen and :-webkit-full-screen MUST live in separate rules; if one selector is unknown to the browser the whole selector list is discarded.) */ .chassis-column:fullscreen { width: 100vw; height: 100vh; background: var(--bg); justify-content: center; padding: 12px; } .chassis-column:-webkit-full-screen { width: 100vw; height: 100vh; background: var(--bg); justify-content: center; padding: 12px; }