/* ========================================================= LOCAL GAME STYLES: Pitch Match — Landscape Edition Builds on top of ../../shared/global.css The game forces a landscape orientation regardless of the device's auto-rotation setting. The user turns their phone 90° anticlockwise; we counter-rotate the .app 90° CW via CSS transform so content appears in landscape. Because .app has a CSS transform it acts as the containing block for all position:fixed children (modals), so they correctly overlay the rotated area. Layout: Single Column Scrollable Flow optimized for Landscape ========================================================= */ /* ─── Game-local colour tokens ─── */ :root { --game-pink: #f472b6; --game-pink-shadow: #db2777; } /* ─── Wider play area ─── This game benefits from more horizontal space than the site's default 600px cap, so raise it to 1000px whenever the viewport has room. .app still centres itself and shrinks below that as normal, so nothing changes on narrower screens. (When pm-force-landscape is active below 610px, the orientation-lock rule further down sets max-width: none !important, which always wins over this regardless of specificity.) */ body .app { max-width: 1000px; } /* Cap the title logo's height in the vertical view — it's hidden entirely in landscape/mobile mode further down, so no override is needed there. */ .hero .app-titleImg { max-height: 200px; width: auto; } /* ─── Orientation lock threshold ─── Below 610px viewport width, the game forces a landscape layout (rotating .app 90°) regardless of the device's own auto-rotation setting. At 610px and above (desktop, tablet, or any wide window) the game stays in its normal, unrotated orientation and behaves like every other game. pitchmatchscript.js (applyOrientationLock) adds/removes the "pm-force-landscape" class on based on window.innerWidth — every rule below is scoped to that class so nothing here affects wide viewports. */ /* ─── Body lock (prevents any page-level scroll/bounce) — narrow/landscape only ─── */ html.pm-force-landscape, html.pm-force-landscape body { overflow: hidden; width: 100%; height: 100%; /* Prevent Chrome Android from aggressively boosting font sizes */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ─── Force landscape via 90° CW rotation — narrow/landscape only ─── */ /* Technique: place the element's top-left corner at the viewport's top-right, then rotate 90° CW around that corner (transform-origin: top left). Result: the element spans the full screen in landscape. CSS uses 100vw/100vh as a fallback. A JS helper (applyOrientationLock in pitchmatchscript.js) overrides width/height/left with window.innerWidth / window.innerHeight on load and resize — this is necessary because Android WebView reports 100vh incorrectly (it includes system bars), which causes the half-screen rendering bug seen in exported Android builds. */ html.pm-force-landscape body .app { position: fixed !important; top: 0 !important; left: 100vw !important; /* JS overrides this with window.innerWidth px */ width: 100vh !important; /* JS overrides with window.innerHeight px */ height: 100vw !important; /* JS overrides with window.innerWidth px */ transform: rotate(90deg) !important; transform-origin: top left !important; /* Enable vertical scrolling through the entire layout */ overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overflow-anchor: none !important; /* Prevents DOM changes from nudging scroll */ overscroll-behavior: none !important; /* Prevents iOS bounce at scroll boundaries */ /* Stack sections linearly down the screen */ max-width: none !important; min-height: unset !important; margin: 0 !important; padding: 8px 12px 24px !important; gap: 10px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; box-sizing: border-box !important; } /* ─── Title & status ─── Structured the same way as the other games (see e.g. Find The Major Scale): a plain centred title and a statusPanel for feedback text. The navigation buttons live in .actionsGrid inside .unified-controls-panel below, alongside the gameplay buttons — see that section. */ .gameMainTitle { text-align: center; font-size: 22px; font-weight: 900; color: var(--text-main); margin: 0; padding: 0 12px; } .statusPanel { border-radius: var(--radius-md); box-shadow: var(--shadow-soft); } .statusRow { display: flex; flex-direction: column; align-items: center; gap: 20px; } .statusText { text-align: center; width: 100%; background: var(--bg-base); padding: 16px; border-radius: var(--radius-sm); border: 2px solid rgba(255, 255, 255, 0.05); box-sizing: border-box; } body.light-theme .statusText { border-color: rgba(0, 0, 0, 0.05); } .phaseTitle { display: block; font-size: 22px; font-weight: 900; color: var(--game-pink); margin-bottom: 6px; } .feedbackLine { display: block; font-size: 16px; color: var(--text-muted); min-height: 24px; font-weight: 500; } .feedbackLine strong { color: #fff; font-weight: 800; background: var(--accent); padding: 2px 6px; border-radius: 6px; } /* ─── Unified Controls Panel ─── Home/Info navigation buttons (.actionsGrid) and the gameplay buttons (.control-row) now share this single tile, mirroring how the other games put their utility-button row and play-button row in one controlsPanel (e.g. Find The Major Scale). */ .unified-controls-panel { background: var(--bg-surface); border: 2px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); padding: 4px; padding-bottom: 8px; box-shadow: var(--shadow-soft); flex-shrink: 0; } body.light-theme .unified-controls-panel { border-color: rgba(0, 0, 0, 0.06); } .actionsGrid { display: flex; gap: 8px; width: 100%; margin-bottom: 8px; } .actionsGrid .icon-btn { flex: 1; height: 52px; padding: 0; font-size: 22px; min-width: 0; } .control-row { display: flex; width: 100%; } .action-group { display: flex; gap: 6px; align-items: center; width: 100%; } /* Scaled up Uniform Control Buttons */ .control-row .btn { height: 48px; font-size: 18px; font-weight: 800; padding: 0 14px; margin: 0; display: flex; align-items: center; justify-content: center; } .action-group #replayBtn { min-width: 115px; } .action-group .btn:not(#replayBtn) { flex: 1; } /* ─── Keyboard Container ─── */ .game-keyboard-section { background: var(--bg-base); border-radius: var(--radius-sm); padding: 0px; width: 100%; aspect-ratio: 210 / 53; /* matches buildKeyboard()'s 840x212 viewBox exactly */ box-sizing: border-box; flex-shrink: 0; /* .app's flex gap (10px) applies evenly between every section. Pull just this section closer to the controls panel above it without affecting the gap on its other side (to the scorecard below). */ margin-top: -0px; } .keyboardMount { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; touch-action: manipulation; /* Allow taps but block scroll/zoom gestures on the keyboard */ } .keyboardMount svg { display: block; width: 100%; height: 100%; overflow: visible; } /* ─── Wide Scorecard Section ─── */ .unified-score-section { padding: 0; background: transparent; border: none; box-shadow: none; flex-shrink: 0; } .wideScoreCard { background: var(--bg-surface); border: 2px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); padding: 10px; box-shadow: var(--shadow-soft); } body.light-theme .wideScoreCard { border-color: rgba(0, 0, 0, 0.06); } .scorecard-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 6px; } .analysisLabel { font-size: 14px; font-weight: 900; color: var(--text-main); } .scoreMeta { font-size: 12px; font-weight: 700; color: var(--text-muted); } .scorecard-inputs { display: flex; gap: 6px; align-items: center; } .wideScoreCard input { height: 32px; background: var(--bg-base); border: 2px solid var(--bg-elevated); color: var(--text-main); border-radius: var(--radius-sm); padding: 0 8px; font-family: var(--font-main); font-size: 12px; font-weight: 700; outline: none; } .wideScoreCard .default-btn { height: 32px; font-size: 12px; padding: 0 12px; } /* Reconfigured Grid: 3 items per row to make use of landscape width */ .scoreGridHorizontal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .scoreItem { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: var(--bg-base); border-radius: var(--radius-sm); border: 1px solid var(--bg-elevated); } .scoreK { font-size: 10px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; } .scoreV { font-size: 15px; font-weight: 900; } .text-correct { color: var(--info-teal); } .text-incorrect { color: var(--danger); } .text-accent { color: var(--accent); } /* ─── Button Shared Logic overrides ─── */ .btn:disabled { opacity: 0.38; cursor: not-allowed; transform: none !important; } .btn-pink { background: var(--game-pink); color: #fff; border: 2px solid var(--game-pink-shadow); box-shadow: 0 3px 0 var(--game-pink-shadow); } .default-btn { background: var(--bg-elevated); color: var(--text-main); border: 2px solid transparent; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); } .next-btn { background: var(--next-orange) !important; color: #fff !important; border: 2px solid var(--next-shadow); box-shadow: 0 3px 0 var(--next-shadow) !important; } .next-btn:disabled { opacity: 0.75; /* keep the muted-orange tint visible instead of being washed out by the generic .btn:disabled dimming */ } .nextReady { background: var(--next-orange) !important; color: #fff !important; border: 2px solid var(--next-shadow); box-shadow: 0 3px 0 var(--next-shadow) !important; } /* ─── Title, status, nav buttons & keyboard — narrow/landscape only ─── The logo header, the plain title, the statusPanel tile and the standard-sized nav buttons (now sharing .unified-controls-panel with the gameplay buttons) are all a "vertical orientation" (610px and above, unrotated) look, matching the rest of the site. Below 610px the game force-rotates into landscape, where every pixel of height matters, so the header is hidden, the title/status text collapse back to a single compact line, the nav buttons revert to their larger original pill shape, and the keyboard section reverts to its original fixed compact height. */ html.pm-force-landscape .hero { display: none !important; } html.pm-force-landscape .gameMainTitle { display: none !important; } html.pm-force-landscape .statusPanel { box-shadow: none !important; } html.pm-force-landscape .statusRow { gap: 0 !important; } html.pm-force-landscape .statusText { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important; text-align: left !important; padding: 6px 14px !important; font-size: 14px !important; } html.pm-force-landscape .phaseTitle { display: inline !important; font-size: inherit !important; margin-bottom: 0 !important; } html.pm-force-landscape .feedbackLine { display: inline !important; font-size: inherit !important; min-height: unset !important; } html.pm-force-landscape .feedbackLine strong { padding: 1px 4px !important; border-radius: 4px !important; } html.pm-force-landscape .actionsGrid { justify-content: center !important; margin-bottom: 6px !important; } html.pm-force-landscape .actionsGrid .icon-btn { flex: 0 0 auto !important; height: 80px !important; width: auto !important; min-width: 80px !important; font-size: 20px !important; padding: 0 16px !important; border-radius: 50px !important; } html.pm-force-landscape .game-keyboard-section { aspect-ratio: unset !important; height: 160px !important; } /* ─── Modals Sizing & Constraints — narrow/landscape only ─── */ /* Coordinate mapping after 90° CW CSS rotation (user rotates phone 90° CCW): App x-axis (left→right) maps to landscape RIGHT→LEFT App y-axis (top→bottom) maps to landscape BOTTOM→TOP So "landscape top" = pre-rotation BOTTOM = align-items: flex-end (cross-axis on row flex). justify-content: center keeps the card centred in the landscape left-right direction. These overrides only apply while html.pm-force-landscape is set (viewport narrower than 610px) — at 610px and above the default modal styles from shared/global.css are used unchanged. */ html.pm-force-landscape body .modal { align-items: flex-start !important; /* pre-rotation top = physical landscape top */ justify-content: center !important; /* centred in landscape left-right */ padding: 14px !important; } /* Intro modal stays fully centred in both axes */ html.pm-force-landscape body #introModal { align-items: center !important; justify-content: center !important; } html.pm-force-landscape body .modal .modalCard { max-height: calc(100vw - 28px); /* landscape height = portrait width */ max-width: calc(100vh - 32px); /* landscape width = portrait height */ overflow-y: hidden; /* body scrolls internally via .modalBody */ padding: 12px; } html.pm-force-landscape .introModalCard { max-height: calc(100vw - 20px) !important; overflow-y: hidden !important; } .introModalCard .modalBody p { margin: 0 0 4px 0; font-size: 18px; line-height: 1.3; } .side-by-side-actions { display: flex !important; flex-direction: row !important; gap: 8px !important; margin-top: 8px; } .side-by-side-actions .btn { flex: 1; margin: 0 !important; height: 60px !important; font-size: 18px !important; } .modalGameTitle { text-align: center; font-size: 22px; font-weight: 900; margin-bottom: 2px; text-transform: uppercase; } .modalGameSubtitle { text-align: center; font-size: 20px; font-weight: 700; margin-bottom: 6px; color: var(--text-muted); } .inside-modal { background: transparent; border: none; box-shadow: none; padding: 0; } /* Score modal name + download row — mirrors the main scorecard layout */ .inside-modal .scoreActions { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; } .inside-modal .scoreActions input { flex: 1; height: 32px; background: var(--bg-base); border: 2px solid var(--bg-elevated); color: var(--text-main); border-radius: var(--radius-sm); padding: 0 8px; font-family: var(--font-main); font-size: 11pt; /* was 12px = 9pt, under the 11pt floor */ font-weight: 700; outline: none; } .scoreGridVertical { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } /* Text inside the Round Complete modal's score card - bumped up to the 11pt floor (.scoreK was 10px = 7.5pt, .scoreMeta and .analysisLabel were under 11pt too). .scoreV was already 15px = 11.25pt, so left as-is. */ .inside-modal .scoreK, .inside-modal .scoreMeta, .inside-modal .analysisLabel { font-size: 11pt; }