/* Touch split layout (PRD §11.9), shared by every theme. Active when : coarse pointer or the ?touch=1 override. Street View and the guess map become two panes with a draggable divider. */ body.touch #game-screen.active { display: flex; flex-direction: column; /* the visible area, not the "large" viewport hidden behind the browser bar: the map pane and its Submit button must always be on screen */ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important; height: 100vh; height: 100dvh; height: var(--app-h, 100dvh) !important; /* themes give every screen min-height: 100vh; on tablets that is the "large" viewport behind the browser bar, which pushed the map pane's bottom off screen until the bar collapsed */ min-height: 0 !important; max-height: var(--app-h, 100dvh) !important; overflow: hidden !important; } html.touch-root, body.touch { height: 100%; overflow: hidden; } #touch-diag { position: fixed; left: 8px; top: 50%; z-index: 999; background: rgba(0,0,0,.8); color: #0f0; font: 12px/1.4 monospace; padding: 6px 8px; pointer-events: none; white-space: pre; border-radius: 6px; } body.touch { overflow: hidden; overscroll-behavior: none; } #split-ghost { position: absolute; left: 0; right: 0; top: 80%; height: 4px; margin-top: -2px; background: #ffd400; box-shadow: 0 0 8px rgba(0,0,0,.6); z-index: 40; pointer-events: none; } #split-ghost.v { top: 0; bottom: 0; right: auto; left: 80%; width: 4px; height: auto; margin: 0 0 0 -2px; } body.touch #game-screen.vertical { flex-direction: row; } body.touch #street-view { position: relative !important; inset: auto !important; flex: 0 0 var(--sv, 80%); min-height: 0; min-width: 0; overflow: hidden; } /* divider with an enlarged grab handle */ body.touch #touch-divider { display: block; position: relative; flex: 0 0 4px; background: rgba(255,255,255,.55); z-index: 26; touch-action: none; user-select: none; -webkit-user-select: none; } body.touch #touch-divider .grab { position: absolute; left: 50%; top: 50%; width: 96px; height: 48px; transform: translate(-50%, -50%); background: rgba(24,24,28,.9); border: 1px solid rgba(255,255,255,.4); border-radius: 24px; box-shadow: 0 2px 10px rgba(0,0,0,.5); cursor: row-resize; touch-action: none; display: flex; align-items: center; justify-content: center; gap: 5px; } body.touch #touch-divider .grab::before, body.touch #touch-divider .grab::after { content: ""; width: 26px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.85); } body.touch #touch-divider .grab::after { width: 18px; } body.touch #game-screen.vertical #touch-divider .grab { width: 48px; height: 96px; flex-direction: column; cursor: col-resize; } body.touch #game-screen.vertical #touch-divider .grab::before, body.touch #game-screen.vertical #touch-divider .grab::after { width: 3px; height: 26px; } body.touch #game-screen.vertical #touch-divider .grab::after { height: 18px; } /* the map pane: always fully visible, the submit row keeps its height */ body.touch .gmap-wrap { position: relative !important; inset: auto !important; right: auto !important; bottom: auto !important; flex: 1 1 auto; width: auto !important; height: auto !important; min-height: 0; min-width: 0; opacity: 1 !important; transition: none !important; border-radius: 0; border-width: 0; box-shadow: none; display: flex; flex-direction: column; overflow: hidden; } body.touch #guess-map-box { flex: 1 1 auto; min-height: 60px; } body.touch #submit-row, body.touch #lifelines, body.touch #country-search-wrap, body.touch #br-readout { flex: 0 0 auto; } body.touch #submit-guess, body.touch #finish-guess { min-height: 52px; } body.touch #map-size-btns, body.touch #shortcuts-hint { display: none !important; } /* HUD over the Street View pane */ body.touch #timer-pill { top: 62px; } body.touch .topbar .bug { margin-top: 44px; } body.touch #game-screen.vertical #compass { left: calc(var(--sv, 80%) / 2); width: min(320px, calc(var(--sv, 80%) - 24px)); } body.touch #game-screen.vertical #compass-window { width: 100%; } body.touch #game-screen.vertical #br-circles { left: calc(var(--sv, 80%) / 2); } body.touch #br-topright { width: 200px; max-width: 40vw; font-size: 12px; } body.touch #game-screen.vertical #br-topright, body.touch #game-screen.vertical .topright { right: calc(100% - var(--sv, 80%) + 8px); } body.touch #game-screen.vertical .topright { position: absolute; top: 0; } /* Undo / Reset / flip / fullscreen column, bottom-left of the Street View pane */ body.touch #touch-buttons { /* a row in the horizontal split: a column would climb into the round bug when the pane is short */ display: flex; flex-direction: row; gap: 8px; position: absolute; left: 8px; z-index: 30; top: var(--sv, 80%); transform: translateY(calc(-100% - 12px)); } body.touch #game-screen.vertical #touch-buttons { top: auto; bottom: 12px; transform: none; flex-direction: column; } body.touch #touch-buttons button { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; background: rgba(20,20,24,.82); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; } body.touch #touch-buttons button:active { background: rgba(60,60,70,.95); } /* narrow map panes (vertical split): keep the submit label on one or two tidy lines */ body.touch #submit-guess, body.touch #finish-guess { font-size: 17px; line-height: 1.15; padding: 4px 8px; white-space: normal; }