/* Ghost Particle - mobile layout layer. Loaded after the game's own stylesheet; only touches * what breaks on phones. `.touch` on = coarse pointer (set by mobile.js). */ html, body { touch-action: none; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: 100%; } #stage canvas { touch-action: none; } .hud-card, .hud-card *, .hud-credits-scroll, .hud-credits-scroll * { -webkit-user-select: text; user-select: text; } .hud-card { transition: none; touch-action: pan-y; } /* Steering arrows (only shown by mobile.js on the steering level) */ .gp-steer { display: none; position: absolute; bottom: calc(100% - var(--gp-card-top, 70%) + 1rem); width: 4.6rem; height: 4.6rem; border-radius: 50%; border: 1px solid #3b4756; background: #070b1ab3; color: #cfd8dc; font: inherit; font-size: 1.5rem; line-height: 1; align-items: center; justify-content: center; pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; z-index: 5; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: bottom .2s ease-out; } .gp-steer.on { display: flex; } .gp-steer.down { background: #37444f; border-color: #cfd8dc; } .gp-steer-left { left: 4vw; } .gp-steer-right { right: 4vw; } /* Phones and small tablets, portrait-ish */ @media (pointer: coarse), (max-width: 700px) { .hud-card { width: 92vw; padding: .8rem 1rem; bottom: max(4vh, env(safe-area-inset-bottom, 0px)); bottom: max(4dvh, env(safe-area-inset-bottom, 0px)); max-height: 48vh; max-height: 48dvh; overflow-y: auto; box-sizing: border-box; } .hud-card-small { width: 80vw; } .hud-card-text { font-size: 1rem; line-height: 1.4; } .hud-card-hint { font-size: .7rem; margin-top: .6rem; } .hud-note { max-height: 36vh; } .hud-title { top: 11%; font-size: clamp(2rem, 11vw, 3.2rem); } .hud-prompt { bottom: 12vh; font-size: .8rem; letter-spacing: .22em; text-indent: .22em; width: 90vw; text-align: center; } .hud-big { font-size: 2rem; bottom: 24vh; width: 90vw; } .hud-meter { width: 60vw; } .hud-reveal { white-space: normal; text-align: center; width: max-content; max-width: 88vw; font-size: 1rem; bottom: 34vh; } .hud-counter { top: max(.6rem, env(safe-area-inset-top, 0px)); right: 3vw; max-width: 58vw; font-size: .72rem; line-height: 1.3; } .hud-counter-large { width: 86vw; max-width: none; padding: 1rem 1.1rem 1.2rem; font-size: .95rem; top: 45%; right: auto; } .hud-counter-large .hud-counter-value { font-size: clamp(1.6rem, 9vw, 2.6rem); } .hud-sub { top: max(.6rem, env(safe-area-inset-top, 0px)); right: 3vw; font-size: .7rem; } .hud-readout { top: max(.7rem, env(safe-area-inset-top, 0px)); left: 3vw; font-size: .8rem; max-width: 38vw; line-height: 1.3; } .hud-flavor { top: 2.6rem; left: 3vw; right: auto; font-size: .68rem; } /* Standard Model grid: 4 columns, compact tiles, scrolls if the phone is short */ .hud-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: .3rem; top: 4.4rem; left: 3vw; right: 3vw; width: auto; max-height: calc(var(--gp-card-top, 100vh) - 4.4rem - .6rem); overflow-y: auto; pointer-events: auto; touch-action: pan-y; scrollbar-width: none; padding-bottom: .2rem; } .hud-grid::-webkit-scrollbar { display: none; } .hud-tile { padding: .35rem .2rem .4rem; border-radius: .3rem; } .hud-tile-name { font-size: 1rem; line-height: 1.15; } .hud-tile-label { font-size: .64rem; line-height: 1.2; margin-top: .15rem; overflow-wrap: anywhere; } .hud-tile-loud .hud-tile-label { font-size: .7rem; } /* Electron / Muon choices: sit just above the card when one is up, larger tap targets */ .hud-buttons { bottom: calc(100% - var(--gp-card-top, 78%) + .75rem); gap: .6rem; width: max-content; max-width: 94vw; flex-wrap: wrap; justify-content: center; transition: bottom .2s ease-out; } .hud-button { padding: .7rem 1.2rem; font-size: 1rem; min-width: 7.5rem; border-radius: .5rem; } .touch .hud-button kbd { display: none; } .hud-chart { width: 94vw; left: 3vw; top: 42%; } .hud-skymap .hud-chart-note, .hud-skymap .hud-chart-credit { left: 3vw; right: 3vw; bottom: auto; font-size: .68rem; line-height: 1.3; } .hud-skymap .hud-chart-note { top: 4.4rem; } .hud-skymap .hud-chart-credit { top: 6.8rem; } .hud-credits { width: 92vw; padding: 1rem 1rem 1.1rem; gap: .8rem; top: 50%; box-sizing: border-box; max-height: 84vh; max-height: 84dvh; } .hud-credits-scroll { height: 44vh; height: 44dvh; touch-action: pan-y; pointer-events: auto; } .hud-credits-line { font-size: .78rem; line-height: 1.6; } .hud-credits-byline { font-size: .75rem; margin-top: .4rem; } .hud-credits-play { padding: .7rem 1.6rem; } } /* Phones in landscape: keep the card short so the scene stays visible */ @media (pointer: coarse) and (max-height: 500px) { .hud-card { width: 72vw; bottom: 2vh; padding: .55rem .9rem; max-height: 60vh; } .hud-card-text { font-size: .9rem; line-height: 1.3; } .hud-card-hint { margin-top: .35rem; font-size: .6rem; } .hud-title { top: 8%; font-size: clamp(1.5rem, 8vh, 2.4rem); } .hud-prompt { bottom: 10vh; } .hud-counter { font-size: .62rem; max-width: 40vw; } .hud-readout { font-size: .7rem; } .hud-flavor { top: 2rem; } .hud-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; top: 3rem; } .hud-tile-name { font-size: .85rem; } .hud-tile-label { font-size: .55rem; } .hud-buttons { bottom: calc(100% - var(--gp-card-top, 80%) + .5rem); } .hud-button { padding: .45rem .9rem; font-size: .9rem; min-width: 6rem; } .gp-steer { width: 3.4rem; height: 3.4rem; font-size: 1.2rem; } .hud-credits { padding: .7rem .9rem; gap: .5rem; max-height: 92vh; } .hud-credits-scroll { height: 40vh; } .hud-counter-large { padding: .6rem .9rem .8rem; font-size: .8rem; } .hud-skymap .hud-chart-note { top: 2.6rem; } .hud-skymap .hud-chart-credit { top: 4.4rem; } }