/* GolferHD Arcade — shared cabinet shell. Chrome only: mobile reset, loading splash, rotate gate, fullscreen button, A2HS toast. Never game logic. Configured by data attributes: data-orientation portrait | landscape | any (fullscreen lock arg) data-rotate-gate portrait | landscape | off (which orientation is demanded) data-loading-anim bounce | roll (splash variant) Everything here degrades gracefully: the gate, the splash and the reset are pure CSS, so they survive arcade-shell.js failing to load. */ :root { --night: #0A1F14; --pine: #123524; --cream: #F2EAD3; --phosphor: #57FA57; --pixel: 'Silkscreen', monospace; --min-tap: 44px; } /* ---------------------------------------------------------- mobile reset */ html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; touch-action: none; overscroll-behavior: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: var(--night); /* golf-ball dimple texture on the letterbox area */ background-image: radial-gradient(circle at 1px 1px, rgba(242, 234, 211, 0.05) 1px, transparent 1.5px); background-size: 22px 22px; } /* touch-action is NOT inherited, and the canvas is the element that actually receives the touches — without this, iOS still runs its own pan/zoom gestures on top of the game and swipes drag the page out from under you. */ canvas { display: block; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* same for the chrome, so a swipe that starts on a button is inert too */ #fs, #a2hs, #rotate, #gate-skip, #loading { touch-action: none; } /* Safe-area probe: arcade-shell.js reads the resolved insets off this element's padding, which is the only reliable way to get env() values into JS. */ #arcade-safe-probe { position: fixed; top: 0; left: 0; width: 0; height: 0; visibility: hidden; pointer-events: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* -------------------------------------------------------- loading splash */ #loading { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: var(--night); transition: opacity 0.45s ease; } #loading.done { opacity: 0; pointer-events: none; } #loading .label { font-family: var(--pixel); font-size: 14px; letter-spacing: 4px; color: var(--phosphor); text-shadow: 0 0 10px rgba(87, 250, 87, 0.6); animation: blink 1.2s steps(2, start) infinite; margin: 0; } @keyframes blink { 50% { opacity: 0.35; } } .tee { position: relative; } .tee > i { position: absolute; display: block; } /* bounce variant — muni-monsters, muni-world, bunker-blasters */ html[data-loading-anim="bounce"] .tee { width: 120px; height: 64px; } html[data-loading-anim="bounce"] .cup { display: none; } html[data-loading-anim="bounce"] .ball { left: 50%; bottom: 10px; width: 16px; height: 16px; margin-left: -8px; background: var(--cream); box-shadow: 0 0 0 2px var(--night), 0 0 12px rgba(87, 250, 87, 0.5); image-rendering: pixelated; animation: bounce 0.7s cubic-bezier(0.3, 0, 0.7, 1) infinite alternate; } html[data-loading-anim="bounce"] .shadow { left: 50%; bottom: 2px; width: 28px; height: 6px; margin-left: -14px; background: rgba(0, 0, 0, 0.45); border-radius: 50%; animation: squash 0.7s cubic-bezier(0.3, 0, 0.7, 1) infinite alternate; } @keyframes bounce { from { transform: translateY(0); border-radius: 40% 40% 30% 30%; } to { transform: translateY(-40px); border-radius: 50%; } } @keyframes squash { from { transform: scaleX(1.3); opacity: 0.6; } to { transform: scaleX(0.6); opacity: 0.25; } } /* roll variant — three-putt: a ball rolling into the cup */ html[data-loading-anim="roll"] .tee { width: 140px; height: 40px; } html[data-loading-anim="roll"] .shadow { display: none; } html[data-loading-anim="roll"] .cup { right: 0; bottom: 6px; width: 22px; height: 8px; background: #000; border-radius: 50%; box-shadow: 0 0 0 2px rgba(242, 234, 211, 0.4); } html[data-loading-anim="roll"] .ball { left: 0; bottom: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 12px rgba(87, 250, 87, 0.5); image-rendering: pixelated; animation: roll 1.4s cubic-bezier(0.15, 0.6, 0.4, 1) infinite; } @keyframes roll { 0% { left: 0; opacity: 1; } 80% { left: 106px; opacity: 1; } 92% { left: 110px; opacity: 0; } 100% { left: 0; opacity: 0; } } /* ------------------------------------------------------ fullscreen button */ #fs { position: fixed; top: calc(8px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); z-index: 40; width: var(--min-tap); height: var(--min-tap); display: none; background: rgba(10, 31, 20, 0.7); color: rgba(242, 234, 211, 0.75); border: 1px solid rgba(242, 234, 211, 0.35); border-radius: 10px; font-size: 18px; line-height: 1; } @media (pointer: coarse) { #fs:not([hidden]) { display: block; } } /* ------------------------------------------------------------ rotate gate Pure CSS so it still guards the game when arcade-shell.js is absent. Dismissible: iOS Safari cannot honour screen.orientation.lock(), and a phone with Portrait Orientation Lock enabled physically cannot rotate — an absolute wall would make the game unplayable for those users. */ #rotate { display: none; position: fixed; inset: 0; z-index: 50; background: var(--night); color: var(--phosphor); font-family: var(--pixel); font-size: 15px; letter-spacing: 0.2em; text-align: center; flex-direction: column; align-items: center; justify-content: center; gap: 26px; } #rotate .glyph { font-size: 34px; line-height: 1; } #rotate p { margin: 0; line-height: 1.7; } #rotate .dir::after { content: attr(data-dir); } #gate-skip { min-height: var(--min-tap); min-width: 160px; padding: 0 18px; background: transparent; color: rgba(242, 234, 211, 0.75); border: 1px solid rgba(242, 234, 211, 0.4); border-radius: 10px; font-family: var(--pixel); font-size: 11px; letter-spacing: 0.14em; } html[data-rotate-gate="portrait"] #rotate .dir::after { content: "PORTRAIT"; } html[data-rotate-gate="landscape"] #rotate .dir::after { content: "LANDSCAPE"; } @media (orientation: landscape) and (pointer: coarse) and (max-height: 540px) { html[data-rotate-gate="portrait"]:not([data-gate-dismissed]) #rotate { display: flex; } } @media (orientation: portrait) and (pointer: coarse) and (max-width: 540px) { html[data-rotate-gate="landscape"]:not([data-gate-dismissed]) #rotate { display: flex; } } /* --------------------------------------------------- back-swipe guard toast */ #back-toast { display: none; position: fixed; left: 50%; transform: translateX(-50%); top: calc(12px + env(safe-area-inset-top)); z-index: 46; background: rgba(10, 31, 20, 0.94); color: var(--phosphor); border: 1px solid rgba(87, 250, 87, 0.5); border-radius: 8px; font-family: var(--pixel); font-size: 11px; letter-spacing: 0.1em; padding: 9px 14px; white-space: nowrap; pointer-events: none; } #back-toast:not([hidden]) { display: block; } /* ------------------------------------------------------------- A2HS toast */ #a2hs { display: none; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 45; min-height: var(--min-tap); align-items: center; background: rgba(10, 31, 20, 0.92); color: var(--cream); border: 1px solid rgba(87, 250, 87, 0.5); border-radius: 8px; font-family: var(--pixel); font-size: 11px; letter-spacing: 0.08em; padding: 8px 14px; white-space: nowrap; } #a2hs:not([hidden]) { display: flex; }