/* main.css — reset, root variables, fonts */ @font-face { font-family: 'BritannicBold'; src: url('../assets/fonts/BritannicBold.ttf') format('truetype'); font-weight: bold; font-style: normal; } /* Cyrillic-capable display face for the Russian UI (Britannic Bold has no Cyrillic). WMSerifDisplay = Playfair Display ExtraBold (SIL OFL, self-hosted — no Google CDN: keeps user IPs away from US servers, CNIL-friendly; replaced the TT Ramillas TRIAL 2026-08-11) with the arrow glyphs (U+2190–21FF) REMOVED and the internal name changed per OFL's Reserved-Font-Name rule for modified builds. Why removed: Playfair's own → is a swashy display arrow, and pinning arrows to a sans via src:local() silently fails on iOS Safari. With no arrows in any face of the family, every browser falls through to the system font for them — the exact mechanism that gives FR/EN (Britannic, which never had arrows) their clean「← Выйти」-style arrows. The filename also serves as the cache-buster: the arrow-ful predecessor sat under a 30-day TTF cache, so a same-name replacement would not have reached phones for a month. */ @font-face { font-family: 'WMSerifDisplay'; src: url('../assets/fonts/WMSerifDisplay-ExtraBold.ttf') format('truetype'); font-weight: bold; font-style: normal; } /* DIGITS: Playfair's default figures are oldstyle (ascenders/descenders — the room code read as "jumping"). Britannic's lining digits instead, so codes/scores/vintages look identical to every other language. Later same-family rule wins for its unicode-range. */ @font-face { font-family: 'WMSerifDisplay'; src: url('../assets/fonts/BritannicBold.ttf') format('truetype'); font-weight: bold; font-style: normal; unicode-range: U+0030-0039; } :root { --color-bordeaux: #5e0c23; --color-gold: #c9a550; --color-beige: #fdf8f0; --color-gray-bg: #6b6b6e; --font-display: 'BritannicBold', serif; --font-body: 'Helvetica Neue', sans-serif; } /* Every display-font usage goes through var(--font-display) — wmSetLang() keeps in sync, so switching to RU swaps the display face app-wide (FR/EN keep Britannic). */ html[lang="ru"] { --font-display: 'WMSerifDisplay', 'BritannicBold', serif; } *{box-sizing:border-box;margin:0;padding:0} body{font-family:'Helvetica Neue',Arial,sans-serif;background:#5e0c23;display:flex;justify-content:center;padding:14px;min-height:100vh} /* Sparkling (Bubbles) game board: page background matches the board art's light-gold field so the board blends in instead of a gold disc cut off by the bordeaux page. Toggled in applySparklingBoardUI. */ body.sparkling-bg{background:#d0c082} .wrap{width:100%;max-width:560px;position:relative} /* anchors the pinch-zoom 1× pill (game.css .bw-zoom-reset) */ /* Capacitor iOS shell (html.wm-native, set in index.html ): the document must NOT be the scroller. WKWebView rubber-bands the document and drags every position:fixed layer along with it (screens, overlays, the nav pill), exposing the game board underneath when a short overlay screen is swiped. Make an inner scroll container with no overscroll instead — inner scrollers never move fixed layers. Web (Safari/Chrome) is untouched. */ html.wm-native{height:100%;overflow:hidden;overscroll-behavior:none} html.wm-native body{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;-webkit-overflow-scrolling:touch} /* Safe areas in the native shell (status bar / notch / home indicator). With the WebView scroll view frozen (ios.scrollEnabled=false) iOS no longer insets the content for us, so the layout reserves the top inset itself — requires viewport-fit=cover on the viewport meta. Every full-screen layer starts below the status bar; the strip above it shows the page background, which reads like a native status bar, and scrolling content stops at that line instead of running under the clock. Modal backdrops (dimmed layers) deliberately stay full-bleed. */ html.wm-native body{box-sizing:border-box;padding-top:calc(14px + env(safe-area-inset-top,0px))} /* …and room at the FOOT of the game page (2026-08-31): body is the scroller in the native shell, and its scrollable area used to end at the betting panel's last pixel — so the card's bottom rows (the table board, "Quitter la partie") stayed under the home indicator with nowhere left to scroll. It has to be a real BOX at the end of the page: the body is a flex container whose own bottom padding is swallowed by the stretched item, .wrap is that stretched item, and the panel spills out of it — padding on the body, padding on .wrap and a margin on the panel were all measured and none of them extended the scrollable area. A block with a height does. Overlays are position:fixed and ignore this either way. */ .wm-page-foot{height:0} html.wm-native .wm-page-foot{height:calc(24px + env(safe-area-inset-bottom,0px))} html.wm-native .entry-overlay,html.wm-native .lobby-overlay,html.wm-native .setup-overlay, html.wm-native .auth-overlay,html.wm-native .age-gate-overlay,html.wm-native .onb-overlay, html.wm-native .dash-overlay,html.wm-native .community-overlay,html.wm-native .mystere-info-overlay, html.wm-native .results-overlay,html.wm-native .host-overlay,html.wm-native .quiz-overlay, html.wm-native .settings-overlay,html.wm-native .legal-overlay, html.wm-native .wm-report-overlay,html.wm-native #wmPhotoViewer,html.wm-native #vintagePanel{ top:env(safe-area-inset-top,0px); } /* …EXCEPT the screens that count the notch in their OWN padding-top (added 2026-08-29/30). For those the group rule above insets TWICE — a wasted ~60px band on an iPhone — and, worse, the strip it leaves above them shows whatever is behind: the dashboard is grey and starts at top:0, so a burgundy screen opened over it wore a GREY CAP (reported on the lives shop, and the same on the quiz and the community screens). Let them start at the very top: their own burgundy paints the status-bar strip and their padding keeps the content clear of the notch. The community HUB is excluded — its padding (screens.css) is a plain 24px with no inset, so it still needs the group's offset. Native only; on the web every inset is 0. */ html.wm-native #quizOverlay, html.wm-native #livesShopOverlay, html.wm-native #infoDayOverlay, html.wm-native .community-overlay:not(.community-hub-overlay){top:0} /* .lvl-overlay deliberately NOT in the inset group (2026-08-26): it is a dimmed-backdrop bottom sheet — starting the dim below the status bar left a bare dark strip of the screen underneath showing at the very top. A sheet's dim runs under the clock like every iOS sheet; the 92vh modal itself still starts well below the inset. */ /* Status-bar curtain (2026-08-25, scroll-guard.js sets body.wm-covered): while any full-screen section screen is on show, the game page behind it is taken out of flow. Without this the strip above the screens (they start below the status bar) showed the body, and the body kept its in-game scroll offset after a community-mystery round, so the wheel's top arc slid through the status-bar strip on the casino/quiz screens. HOW, and why not the obvious way: the first cut locked the body with overflow-y:hidden — the classic body-scroll-lock, which WKWebView answers by also killing touch scrolling INSIDE nested scrollers, so the quiz leaderboard and the mystère list (fixed overlays with their own overflow-y:auto) could no longer be dragged at all. Hiding .wrap instead removes the only tall in-flow content there is — every screen and layer above it is position:fixed — so the body has nothing left to scroll, the leak is gone at the source, and the body's own overflow is never touched. Inline display from the game flow still wins where it sets 'none'; it only ever clears back to '', which lets this rule apply. Background forced back to bordeaux too: a sparkling round leaves body.sparkling-bg's gold behind, which would otherwise tint the strip on every screen after the game. Native-only — on the web the screens are full-bleed (inset:0), there is no strip to leak into. */ html.wm-native body.wm-covered{background:#5e0c23} html.wm-native body.wm-covered .wrap{display:none} /* Round timer pill: fixed at the top of the board page. Below the status bar in the native shell, so the full-screen layers (which start there too) cover it instead of leaking it into the status-bar strip above them. */ html.wm-native .timer-widget{top:calc(10px + env(safe-area-inset-top,0px))} html.wm-native .room-code-badge{top:calc(10px + env(safe-area-inset-top,0px))} /* Cépage ID / Régions drawer: it runs full-height from the very top, so its dark header used to sit under the clock and got chewed by the status bar. The gradient keeps painting the strip (reads native); the name / subtitle / × start below it. */ html.wm-native .sb-header{padding-top:calc(14px + env(safe-area-inset-top,0px))} /* Dashboard: unlike the burgundy screens it extends UNDER the status bar, so the strip is painted by the overlay itself (dark grey — one bar with the pinned header). The status-bar text stays light (app default), no per-screen switching needed. */ html.wm-native .dash-overlay{top:0;padding-top:env(safe-area-inset-top,0px)} /* Settings opens OVER the dashboard and its strip showed the dashboard's grey — extend it under the status bar too. The safe-area inset lives on the HEADER, not the overlay: the header's own darkened background then paints the status-bar strip, so the strip and the RÉGLAGES row are one colour (requested 2026-08-24 — with the inset on the overlay the strip took the plain burgundy and read as a separate band). Safe here: the overlay never scrolls itself (pinned .settings-header + inner .settings-body scroller). */ html.wm-native .settings-overlay{top:0} html.wm-native .settings-header{padding-top:calc(16px + env(safe-area-inset-top,0px))} /* ===== Native feel (2026-08-24) ===== */ /* In the native shell the UI chrome is not selectable text: no long-press selection loupe, no "Save image" callout, no grey tap flash — the classic webview tells. Real content the player may want to copy stays selectable (inputs, textareas, the player-ID / code values). Web is untouched — desktop users still select and copy freely. */ /* Native text feel: no automatic text inflation in wide blocks (a webview tell on orientation change), and the fields players type into carry the brand — bordeaux caret, gold selection. */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} input,textarea{caret-color:#8a1538} input::selection,textarea::selection{background:rgba(201,165,80,0.35)} /* ===== Global button shadow (2026-08-24, user request) ===== Every real