/* game.css — extracted from game.html for caching/perf. Source order preserved exactly as it was inline: this file must be linked AFTER auth-ui.css (see #authRoot cascade note below) so the same-specificity, later-wins rule still applies. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :root { --gold: #f8d98b; --gold2: #fff2bd; --lav: #c9a7ff; --text: #fff8ee; --muted: rgba(255, 248, 238, 0.72); --glass: rgba(20, 10, 30, 0.42); --glass-strong: rgba(20, 10, 30, 0.70); --border: rgba(255, 255, 255, 0.20); --shadow: 0 28px 90px rgba(0, 0, 0, 0.48); /* Aliases so auth-ui.css (built against --ink/--line/--bg) reads the same palette as the rest of this page. */ --ink: var(--text); --line: var(--border); --bg: #10091b; /* ---------- Layout budget (desktop/laptop) ---------- The exact same values used by .screen's padding, .game-layout's gap, and .side-panel's width — duplicated here as variables so .stage-frame (below) can size itself against the REAL horizontal space left over after the side panel + gaps + page padding, instead of a flat "78vw" guess. Without this, narrowing the browser window could ask for a stage-frame wider than what's actually left, forcing the flex row to shrink it unevenly (height stays fixed, width gets squeezed) — which distorts the frame's aspect ratio away from the map/world image's real ratio and made the artwork appear cropped at the edges. Sizing against this budget instead means the frame always fits, so nothing ever needs to be cropped — any leftover room just becomes empty air on the sides of the box, and the numbered island badges (positioned in % of that same box) stay exactly where the map artwork puts them. */ --screen-pad: clamp(8px, 1.6vw, 18px); --gl-gap: clamp(10px, 1.8vw, 22px); --sp-width: clamp(200px, 21vw, 300px); --stage-max-w: calc(100vw - (var(--screen-pad) * 2) - var(--gl-gap) - var(--sp-width)); /* Laptop/desktop board bounding box — shrunk a bit (from 64%/60% to 58%/54%) and re-centered (left +3% for the narrower width), plus pushed further down (top +5% beyond the recentering amount) so the circles sit a little lower under the brand/HUD area. Mobile completely overrides all four of these inside its own media query (see max-width:1199px below), so this block only ever affects desktop/laptop. */ --board-left: 21%; --board-top: calc(24% + 38px); /* These two are deliberately unequal — they define a bounding BOX (58% wide x 54% tall of the stage), not the grid's actual shape. The height leaves room below the board for the next-seed panel / controls. The grid itself (.board, via .board-wrap + cqmin — see below) always sizes itself to the largest SQUARE that fits inside this box, centered, so the 5x5 cells stay perfectly square/circular no matter how non-square this bounding box or the stage image is. */ --board-width: 58%; --board-height: 54%; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; min-height: 100%; /* Was overflow:hidden. .screen is sized to a flat 100svh (see below) with no awareness of anything that might ever sit ABOVE it in the page — e.g. a Google AdSense top anchor ad, which docks itself at the very top of and pushes everything else down by exactly its own height. With overflow:hidden here, that push has nowhere to go: the bottom slice of the page — the exact height the ad just took — becomes genuinely unreachable, not just scrolled out of view but rendered outside the page entirely, with no scrollbar or gesture that can ever reach it. Every OTHER "content taller than its box" case in this file is already handled by an internal overflow-y:auto on that specific box (.side-panel, .modal-card, etc.), so this change is a last-resort safety net one level up, not a replacement for those — it only ever does anything on the rare page-level overflow those inner fixes can't reach (like a top-anchor ad's own push), since normal gameplay never grows past .screen's own 100svh box. */ overflow-x: hidden; overflow-y: auto; font-family: Georgia, "Times New Roman", serif; background: #10091b; color: var(--text); } body { min-height: 100svh; background: radial-gradient(circle at 18% 8%, rgba(201, 167, 255, .24), transparent 34%), radial-gradient(circle at 84% 10%, rgba(248, 217, 139, .18), transparent 32%), linear-gradient(135deg, #10091b, #271638 62%, #12091d); } .screen { width: 100vw; height: 100svh; display: grid; place-items: center; padding: clamp(8px, 1.6vw, 18px); position: relative; } /* ===== Site hamburger menu — same menu/behavior as intuition.html, reused here as a compact icon + dropdown (rather than the full horizontal tab header) so it doesn't compete with the game's own top-row/brand/authRoot UI. Opens the same list of site pages on every breakpoint via body.site-menu-open; markup + toggle script live in game.html/game2.html right after . */ #siteMenuToggle { display: flex; position: fixed; top: max(12px, env(safe-area-inset-top)); left: 14px; z-index: 60; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: rgba(19, 14, 28, .85); border: 1px solid rgba(220, 190, 130, .4); border-radius: 12px; color: var(--text); cursor: pointer; } #siteMenuToggle svg { width: 17px; height: 17px; flex: none; } #siteMenuToggle svg line { stroke: var(--gold); stroke-width: 2; stroke-linecap: round; } #siteMenuPanel { position: fixed; top: calc(max(12px, env(safe-area-inset-top)) + 46px); left: 14px; z-index: 60; display: flex; flex-direction: column; gap: 4px; width: min(72vw, 240px); max-height: calc(100vh - 90px); overflow-y: auto; background: rgba(13, 9, 22, .97); border: 1px solid rgba(220, 190, 130, .3); border-radius: 14px; padding: 8px; box-shadow: 0 18px 45px rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease; pointer-events: none; } body.site-menu-open #siteMenuPanel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } #siteMenuPanel a { border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); text-decoration: none; text-align: left; margin: 0; padding: 9px 12px; font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: 13px; letter-spacing: .04em; display: block; box-sizing: border-box; cursor: pointer; } #siteMenuPanel a:hover { color: var(--text); background: rgba(255, 255, 255, .06); } #siteMenuPanel a.nav-sep { border-top: 1px solid rgba(220, 190, 130, .2); margin-top: 4px; padding-top: 13px; } #siteMenuPanel .menu-contact-btn { border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); text-align: left; width: 100%; padding: 9px 12px; font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: 13px; letter-spacing: .04em; cursor: pointer; } #siteMenuPanel .menu-contact-btn:hover { color: var(--text); background: rgba(255, 255, 255, .06); } #siteMenuPanel .menu-contact-email { margin: 2px 0 4px; padding: 0 12px; font-size: 12px; } #siteMenuPanel .menu-contact-email a { padding: 0; display: inline; color: var(--gold); } #siteMenuPanel .menu-contact-email a:hover { text-decoration: underline; background: none; } /* ---------- Game layout ---------- Two siblings, side by side: .stage-frame (the game-world image — board of planting circles + the "next item" preview, nothing else) and .side-panel (a tall vertical strip holding every button and readout that used to float on top of the artwork). Stacked instead (image on top, panel below) on narrow/mobile widths — see the max-width:1199px and landscape media queries further down. */ .game-layout { display: flex; align-items: stretch; justify-content: center; gap: clamp(10px, 1.8vw, 22px); max-width: 100%; max-height: 100%; } .stage-frame { position: relative; /* --stage-ratio (image width / image height) defaults to a square until applyStageAspectRatio() (JS, below) measures the CURRENT world image's real natural size and overwrites it — so the frame always matches whatever that image's actual proportions are, instead of assuming square. Only touched on desktop/laptop widths; on mobile it's left at its default 1 and the media query further down takes over sizing entirely (own width/height rules, own forced-square .stage), so this doesn't affect the phone layout. Height is capped by TWO independent budgets, and the smaller one wins: 96svh (vertical room) and calc(var(--stage-max-w) / ratio) (the height that exactly fills the REAL leftover horizontal room — see --stage-max-w above — without the side panel/gaps/padding being pushed off-screen). Only height is ever set explicitly; width stays auto and is derived from aspect-ratio, so the browser never has to shrink width and height independently (the thing that broke the aspect ratio and made the map look cropped) — the box arrives at its final size already matching the image's real proportions, with any spare room simply left empty on the sides. */ --stage-ratio: 1; height: min(96svh, calc(var(--stage-max-w) / var(--stage-ratio))); width: auto; aspect-ratio: var(--stage-ratio); flex: 0 0 auto; /* Column/row counts for the game grid: 5x5 by default, overridden by JS (see COLS/ROWS + DESKTOP_MEDIA_QUERY below) — 7x5 on desktop/ laptop widths, 5x5 on mobile too now (mobile used to drop the top row of the board — see ROWS_MOBILE — but that row has been added back). */ --board-cols: 5; --board-rows: 5; } /* The vertical panel itself — everything inside it stacks top to bottom in normal flow (no absolute positioning), so it grows exactly as tall as its content needs and simply scrolls if a very short viewport can't fit all of it. */ .side-panel { position: relative; width: var(--sp-width); flex: 0 0 auto; /* Without this, a flex item's default min-height:auto lets its CONTENT'S natural height win over the stretched height coming from .game-layout's align-items:stretch — so on a viewport too short for everything to fit (e.g. a phone in landscape, using this same side-by-side layout — see the min-width:1200px / landscape media queries), the panel just grows taller than its box instead of scrolling, and that overflow then gets clipped by html/body's own overflow:hidden further up. min-height:0 lets the panel actually respect its stretched height so overflow-y:auto (below) can do its job and scroll instead. */ min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* old Edge/IE */ } /* Chrome / Safari / new Edge — same "scrollable but no visible scrollbar" effect as scrollbar-width:none above. */ .side-panel::-webkit-scrollbar { display: none; width: 0; height: 0; } .side-panel .top-row { display: flex; align-items: center; gap: 8px; } /* Mobile-only "How to play" info icon (see #howToPlayBtn in the markup) — hidden everywhere by default; the mobile media query further down turns it on for the map screen only. Sized and styled to match the account icon it sits next to. */ .howtoplay-btn { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid rgba(248,217,139,.22); background: linear-gradient(145deg, rgba(248,217,139,.14), rgba(255,255,255,.04)), var(--glass); color: var(--gold2); cursor: pointer; } .howtoplay-btn:hover, .howtoplay-btn:focus-visible { background: linear-gradient(145deg, rgba(248,217,139,.22), rgba(255,255,255,.08)), var(--glass); outline: none; } /* Landscape-mobile-only alternative to the icon above — icon PLUS the "How to Use" label, sitting inline in the side panel (see the markup right before .how-to-play's

) instead of in a top icon bar. Hidden by default everywhere else; the landscape-mobile media query further down turns it on and hides the full h3+ol instructions in its place. / .how-to-play-compact-btn { display: none; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(248,217,139,.22); background: linear-gradient(145deg, rgba(248,217,139,.12), rgba(255,255,255,.03)), var(--glass); color: var(--gold2); font-family: Arial, sans-serif; font-weight: 900; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; } .how-to-play-compact-btn svg { flex: 0 0 auto; } .how-to-play-compact-btn:hover, .how-to-play-compact-btn:focus-visible { background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.09)), var(--glass); outline: none; } / Copy inside the mobile How to Play modal — reuses .modal-card's look but left-aligns the list instead of the card's default centered text. / .how-to-play-card { text-align: center; } .how-to-play-card ol { margin: 14px 0 20px; padding-left: 20px; text-align: left; display: flex; flex-direction: column; gap: 10px; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.5; color: var(--muted); } / Small illustration under "match 3+" (step 2) in both How to Play lists — the same items merged whether they sit in a straight line or at an angle to each other, so the diagram shows both layouts feeding into the same merged result. / .merge-demo { display: block; width: 100%; max-width: 240px; height: auto; margin-top: 8px; } .side-panel .hud { position: static; inset: auto; left: auto; right: auto; top: auto; bottom: auto; transform: none; } / Hidden while the map screen is showing (see #gameLayout.on-map below) — only the brand/title row + account icon stay visible, matching the original overlay behaviour where the map had its own title and no other HUD chrome. / .side-panel .gameplay-only { display: flex; } / Opposite of .gameplay-only above: hidden during gameplay, shown only while the map screen is showing. Used for the "how to play" info box, which only makes sense before a board is open. / .side-panel .map-only { display: none; } #gameLayout.on-map .side-panel .map-only { display: flex; } .stage { position: absolute; inset: 0; border-radius: clamp(20px, 3vw, 36px); / Fallback color shows through if a world's image (images/game-world.webp or .jpg — see getWorldBackgroundUrl() below) is missing or still loading, instead of leaving the stage plain black. / background-color: #1b1030; background-image: var(--world-bg); background-size: cover; background-repeat: no-repeat; background-position: center; box-shadow: var(--shadow), 0 0 80px rgba(248,217,139,.14); overflow: hidden; isolation: isolate; border: 1px solid rgba(255,255,255,.18); } /* Laptop/desktop only (NOT mobile landscape, which reuses this same layout but is its own separate ask) — thicker frame border around the game world/map image. True min-width:1200px only, on purpose: no OR'd landscape/max-height clause here like the other "desktop-ish" media queries in this file. / @media (min-width: 1200px) { .stage { border-width: 4px; } } .stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 47%, transparent 0 44%, rgba(16, 9, 27, .20) 66%, rgba(7, 3, 12, .54) 100%), linear-gradient(to bottom, rgba(9, 5, 16, .18), rgba(9, 5, 16, .04) 45%, rgba(9, 5, 16, .30)); z-index: 1; } .stars { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(255,255,255,.78) 0 1px, transparent 1.4px), radial-gradient(circle, rgba(248,217,139,.60) 0 1px, transparent 1.3px); background-size: 130px 130px, 210px 210px; opacity: .16; animation: drift 28s linear infinite; z-index: 2; } @keyframes drift { from { transform: translateY(0); } to { transform: translateY(-120px); } } .hud { position: absolute; z-index: 6; display: flex; align-items: center; gap: 10px; / Same gold-tint pass used in Mergico's game.css — see that file's .hud rule for the full rationale. Ties every panel (score, actions, difficulty, how-to-play, remove-ads card, etc.) back to the same gilded palette as the wordmark and the island badges instead of a flat white-on-glass UI-kit look. / border: 1px solid rgba(248,217,139,.22); background: linear-gradient(145deg, rgba(248,217,139,.10), rgba(255,255,255,.04)), var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 18px 50px rgba(0,0,0,.30), 0 0 0 1px rgba(248,217,139,.05) inset, 0 1px 0 rgba(255,242,189,.14) inset; } .brand { flex: 1 1 auto; min-width: 0; padding: 10px 14px; border-radius: 20px; container-type: inline-size; display: flex; align-items: center; justify-content: center; } .brand small { display: block; font-family: Arial, sans-serif; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; font-size: 10px; color: var(--gold2); } .brand strong { display: block; margin-top: 2px; font-size: clamp(16px, 8cqw, 26px); line-height: 1.1; letter-spacing: -.02em; color: #fff4d5; white-space: normal; overflow-wrap: break-word; } / Logo image that replaces the old "Holistic Loader" text on the MAP screen, where it stands alone (no world name shown there). Sized to the brand pill's own height via cqw/clamp so it scales with the layout instead of a fixed pixel size. Falls back to a plain "HOLISTIC GAME" text label (see the inline onerror handler on the in the markup) if the file is missing or fails to load. / .brand-logo { display: block; max-width: 100%; max-height: clamp(64px, 30cqw, 150px); width: auto; height: auto; object-fit: contain; } .brand-fallback { display: none; font-family: Arial, sans-serif; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; font-size: clamp(15px, 7cqw, 22px); color: #fff4d5; } / Map-screen brand group (full logo, or its text fallback) vs. gameplay brand group (small wordmark image + the current world's name, stacked the same way the old "Holistic Loader" / world-name text pair used to be). Only one group is ever visible at a time — toggled by #gameLayout.on-map, the same class used to hide the rest of the gameplay-only side-panel chrome while the map shows. / .brand-map-logo { display: none; align-items: center; } .brand-gameplay { display: flex; flex-direction: column; align-items: center; gap: 0; } #gameLayout.on-map .brand-map-logo { display: flex; } / Laptop/desktop only: the start-map title now sits directly on top of the map image itself (see .map-brand below), so the old side-panel logo pill is hidden here instead. Mobile keeps the side-panel version untouched (see the max-width:1199px query). / @media (min-width: 1200px), (orientation: landscape) and (max-height: 600px) { #gameLayout.on-map .brand-map-logo { display: none; } } #gameLayout.on-map .brand-gameplay { display: none; } / Laptop/desktop only: show the same brand box (logo + world name) and stats/account box on the start-map screen as during gameplay — not just gameplay-only anymore. Mobile keeps the original map/gameplay swap untouched. / @media (min-width: 1200px), (orientation: landscape) and (max-height: 600px) { #gameLayout.on-map .brand-gameplay { display: flex; } #gameLayout.on-map .score.gameplay-only { display: grid; } / Map screen only: show just the small wordmark image, not the current-world name text underneath it (that text still shows normally once actual gameplay starts — see .brand-gameplay above, which is only ever visible on-map on desktop). / #gameLayout.on-map #worldName { display: none; } } / Score box sits above the how-to-play box on the start screen — both are flex children of .side-panel, reordered here instead of in the markup so gameplay's own DOM order (used for the score/account readouts) doesn't need to change. / .score { order: 1; } .how-to-play { order: 2; } .remove-ads-card, .holistic-member-line, .premium-active-badge { order: 3; } / On the map screen the logo stands on its own — no glass "pill" box behind it (the .hud look is right for text/stat readouts, but just clips/cramps a big logo image). Border, background, blur and shadow all come from the shared .hud class, so they're switched off here with a more specific selector rather than touching .hud itself (which the score/collection/etc. panels still rely on). / #gameLayout.on-map .brand { background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; } / Small wordmark image that replaces just the old "Holistic Loader" label on the gameplay view — sits above the world name, so it's sized like that old small-caps label rather than the big map logo. Falls back to plain "HOLISTIC GAME" text (see the inline onerror handler) if the file is missing or fails to load. / .brand-logo-text { display: block; max-width: 100%; max-height: clamp(36px, 18cqw, 60px); width: auto; height: auto; object-fit: contain; } .brand-fallback-text { display: none; font-family: Arial, sans-serif; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; font-size: 10px; color: var(--gold2); } / Holds the title wordmark image on top of the game-world art — see #stageTitle in the markup and layoutStageTitle() in the JS, which moves #brandLogoText/#brandFallbackText in here. Empty (and hidden) on every breakpoint except mobile in landscape ("horizontal") during actual gameplay — see the media query below. On the map/start screen the wordmark stays in its usual side-panel spot instead (layoutStageTitle() only moves it while #gameLayout does NOT have .on-map). / .stage-title { display: none; } @media (orientation: landscape) and (max-height: 600px) and (max-width: 1199px) { #gameLayout:not(.on-map) .stage-title { display: flex; align-items: center; position: absolute; top: 8px; left: 8px; z-index: 5; pointer-events: none; } #gameLayout:not(.on-map) .stage-title .brand-logo-text { max-height: 32px; } / The wordmark image already moved into .stage-title above, so all this box has left in it is the world-name text (see layoutStageTitle() in the JS) — drop the whole box, text included, to free up room in the side panel. Scoped to gameplay (:not(.on-map)) so the map screen's own logo box (.brand-map-logo, a different child of this same .brand wrapper) is untouched. / #gameLayout:not(.on-map) .top-row .brand { display: none; } / Let the next-item icon grow to fill essentially all of its card now that the world-name box above freed up extra room — drop the fixed min-height so it's purely flex-sized, and grow the icon itself from 66% to fill nearly the whole card. / #gameLayout:not(.on-map) .next-box .next-seed { min-height: 0; } #gameLayout:not(.on-map) .next-box .next-seed .item-icon { width: 92%; height: 92%; } / Login icon (#authRoot) is pinned position:fixed to the page's true top-right corner (see the shared min-width:1200px / landscape rule further up, and the tightened "right" value further down in this same query) — but .top-row .brand is flex:1 1 auto and, with little else left in that row on this narrow breakpoint, grows all the way out to the side panel's own right edge (flush with that same corner), so its box ends up sitting directly under/against the icon. Reserving space on the brand box's right keeps a clear gap between the two. Matched with an equal left margin (rather than right-only) so the box shrinks symmetrically and its own centered content (justify-content:center, see .brand) lands on the row's TRUE midpoint — the same midpoint .score's full-width stat row below lines up on — instead of drifting left of it. This only has a visible effect on the map/start screen: during actual gameplay .top-row .brand is hidden outright (see the :not(.on-map) rule above), so the reserved margin has nothing to center there. / .top-row .brand { margin: 0 44px; } } .score { width: 100%; padding: 10px 14px; border-radius: 22px; display: grid; grid-template-columns: auto repeat(3, 1fr); align-items: stretch; gap: 10px; } / Account icon (built into #authRoot by auth.js/auth-ui.css). On mobile it stays a normal flex item at the end of .top-row (see layoutSideExtras() in the JS) — auth-ui.css is linked before this