/* Kingmaker Casino (kingmaker-deutch.com) — content.css Additional CSS on top of design-system/kit.css + skin.css + wrap.css. Scope: Button/CTA component (no .btn class ships in the design-system tokens — the reference is a React component), SEO section, compliance footer, media-frame placeholder label, and the ≤1023px mobile-scroll override. */ /* --------------------------------------------------------------------- 1. CTA button ("Button" component from the reference, reproduced in CSS) --------------------------------------------------------------------- */ .mn-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--btn-h); padding: 0 var(--sp-5); border-radius: var(--r-pill); border: 1px solid transparent; font: 700 14.5px var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), background var(--dur); } .mn-btn:hover { transform: translateY(-1px); } .mn-btn .lucide { flex-shrink: 0; } .mn-btn--primary { background: var(--grad-accent); color: var(--accent-ink); box-shadow: var(--glow-cta); } .mn-btn--primary:hover { box-shadow: var(--glow-cta-hover); } .mn-btn--secondary { background: var(--surface-2); border-color: var(--line); color: var(--text-1); } .mn-btn--secondary:hover { background: var(--surface-3); } .mn-btn--sm { height: var(--btn-h-sm); padding: 0 var(--sp-4); font-size: 13.5px; } .mn-btn--lg { height: var(--btn-h-lg); padding: 0 var(--sp-6); font-size: 16px; } .mn-btn--block { width: 100%; } /* --------------------------------------------------------------------- 2. SEO section — readable long-form text on the dark app-shell frame --------------------------------------------------------------------- */ .mn-seo { padding: var(--sp-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); } .mn-seo h2 { font: 800 var(--fs-h3) var(--font-display); color: var(--text-1); margin-bottom: var(--sp-4); } .mn-seo p { max-width: 72ch; color: var(--text-2); font-size: var(--fs-body); line-height: var(--lh-body); } .mn-seo p + p { margin-top: var(--sp-4); } /* --------------------------------------------------------------------- 3. Compliance footer --------------------------------------------------------------------- */ .mn-footer { border-top: 1px solid var(--line); padding-top: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-6); } .mn-footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-6); } .mn-footer-col h3 { font: 700 13px var(--font-sans); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-3); margin-bottom: var(--sp-3); } .mn-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); } .mn-footer-col a { color: var(--text-2); font-size: var(--fs-sm); text-decoration: none; } .mn-footer-col a:hover { color: var(--text-1); } .mn-footer-bottom { border-top: 1px solid var(--line); padding-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); } .mn-footer-legal, .mn-footer-disclosure, .mn-footer-copy { font-size: var(--fs-xs); color: var(--text-3); line-height: var(--lh-snug); max-width: 80ch; } .mn-footer-legal a { color: var(--text-2); } .mn-footer-legal a:hover { color: var(--text-1); } /* --------------------------------------------------------------------- 3b. Desktop scroll-chain fix (flexbox min-height:auto bug) .mn-main is a CSS Grid item (from .mn-app) containing a flex column (.mn-main-scroll flex:1; overflow-y:auto). Flex items default to min-height:auto, so once .mn-main-scroll's content (hero+grid+SEO+ footer) is taller than the viewport, .mn-main grows to fit that content instead of capping at 100vh — and since .mn-app has overflow:hidden, every pixel beyond the first viewport height is silently clipped and NOT reachable by scrolling. Measured: .mn-main stretched to 2645px in a 900px viewport, cutting off the SEO section and footer entirely. Fix (min-height:0 on the flex chain) is CSS-only and does not touch frame.css — it only makes the overflow:auto that frame.css already declares actually take effect. Scoped to ≥1024px; the ≤1023px block below already switches to normal document flow. --------------------------------------------------------------------- */ @media (min-width: 1024px) { .mn-main, .mn-main-scroll { min-height: 0; } } /* --------------------------------------------------------------------- 4. Mobile scroll fix (≤1023px) The layout shell locks html/body/.mn-app/.mn-main at 100vh + overflow:hidden for the 3-column desktop layout. Below 1023px the grid collapses to a single column (frame.css), so the page must scroll normally instead of being clipped to the viewport height. --------------------------------------------------------------------- */ @media (max-width: 1023px) { html, body, .mn-app, .mn-main { height: auto; overflow: visible; } .mn-main-scroll { overflow: visible; } } /* --------------------------------------------------------------------- 5. Small-mobile topbar overflow fix (≤480px) .mn-pill-vip is already hidden at ≤767px by frame.css, but the remaining .mn-pill-dep + balance/deposit cluster is still wider than narrow phones (measured: 463px content in a 375px viewport), pushing the whole page into horizontal scroll. Deposit Bonus / VIP Club are not unique content lost — both are still reachable via the bonus rail and the nav-rail secondary links — so hiding the topbar promo pill on very small screens removes the overflow without duplicating markup. --------------------------------------------------------------------- */ @media (max-width: 480px) { .mn-promo-pills { display: none; } } /* --------------------------------------------------------------------- 6. Hero mobile fix (≤600px) The media frame is locked to aspect-ratio:16/9 inline in index.html; at narrow widths that yields ~190-210px height, not enough room for eyebrow + title + sub + CTA inside .mn-hero-overlay (absolute, centered) — the button gets clipped by the frame's rounded bottom edge. Frame has no in-flow content (children are all position:absolute), so dropping the aspect-ratio and setting a min-height sizes the box directly to that value with no extra flow content to fight. !important is required to beat the inline style attribute (index.html is out of scope here; overriding via class from page.css is the only lever available). .mn-hero-arrows also moves from bottom-right to top-right so it never overlaps the CTA/last line of .mn-hero-sub, which now sits lower in a taller frame. Desktop (>600px) keeps the original 16:9 + bottom arrows. --------------------------------------------------------------------- */ @media (max-width: 600px) { .mn-hero-frame { aspect-ratio: auto !important; min-height: 360px; } .mn-hero-arrows { top: var(--sp-4); right: var(--sp-4); bottom: auto; } } /* --------------------------------------------------------------------- 7. Long-form article (the home article section) — dark-theme prose .mn-article is a flex child of the .mn-main-scroll column (frame.css); min-width:0 stops a wide table from pushing the flex item past the viewport at narrow widths even though each table has its own scroll wrapper (see .datentabelle below). --------------------------------------------------------------------- */ .mn-article { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); } .mn-article section { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; } .mn-article h2 { font: 800 var(--fs-h3) var(--font-display); color: var(--text-1); } .mn-article h3 { font: 700 var(--fs-h4) var(--font-display); color: var(--text-1); margin-top: var(--sp-2); } .mn-article p { max-width: 72ch; color: var(--text-2); font-size: var(--fs-body); line-height: var(--lh-body); } .mn-article ul { max-width: 72ch; color: var(--text-2); font-size: var(--fs-body); line-height: var(--lh-body); padding-left: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); } .mn-article a { color: var(--accent-2); } .mn-article a:hover { color: var(--text-1); } /* tables: single markup, horizontal-scroll wrapper on narrow screens — no card-duplication needed (each row stays short: 2-4 cells). */ .mn-article .datentabelle { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-card); } .mn-article table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: var(--fs-sm); } .mn-article th, .mn-article td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; color: var(--text-2); } .mn-article th { color: var(--text-1); font: 700 var(--fs-xs) var(--font-sans); text-transform: uppercase; letter-spacing: var(--ls-wide); background: var(--surface-2); white-space: nowrap; } .mn-article tbody tr:hover { background: var(--surface-2); } /* FAQ (dl/dt/dd) */ .mn-article dl { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 72ch; } .mn-article dt { font: 700 var(--fs-lg) var(--font-display); color: var(--text-1); } .mn-article dd { margin: var(--sp-2) 0 0; color: var(--text-2); font-size: var(--fs-body); line-height: var(--lh-body); } /* --------------------------------------------------------------------- 8. Featured cards as full cloak links (item 3/4 of the integration brief) — reset anchor defaults this component picks up now that .mn-feat-card is an , without touching frame.css. --------------------------------------------------------------------- */ a.mn-feat-card { color: inherit; text-decoration: none; } /* --------------------------------------------------------------------- 9. Two-column shell variant (no right bonus rail) — /app/ and /login/ frame.css defines .mn-app as a 3-column grid (244px 1fr 340px) ONLY as its un-scoped base rule; its own @media (max-width:1279px) and (max-width:1023px) blocks already collapse that down for tablet/mobile. Pages without the third (.mn-social) grid child only need an override at the width where frame.css's un-scoped 3-column rule is actually in effect (>=1280px) — otherwise the reserved 340px column shows as a dead gap on wide desktop. Scoping this to min-width:1280px (rather than an inline style on .mn-app, which would beat frame.css's mobile media queries outright and break the burger-menu collapse) leaves the <=1279px responsive behavior entirely untouched. */ @media (min-width: 1280px) { .mn-app--no-social { grid-template-columns: 244px minmax(0, 1fr); } } /* --------------------------------------------------------------------- 10. Extra-small topbar overflow fix (≤374px) Section 5 above already drops .mn-promo-pills at ≤480px, which is enough to fit the topbar at 375px and up (measured: no page-level overflow at 375/768/1440). Below that, on 320px devices, the remaining .mn-topbar-right cluster (balance pill + notification bell + avatar, ~282px) still doesn't fit next to the hamburger button, pushing document.documentElement.scrollWidth to ~345px against a 320px viewport (~25px page-level horizontal overflow, confirmed via scrollWidth/clientWidth comparison, not just visual inspection). The notification bell is not unique content (no unread-count logic ships in panel.js/view.js, it is a static placeholder icon), so hiding it on the narrowest phones removes the overflow without dropping any real functionality or duplicating markup. Scoped to <375px so 375px+ (already fitting) is untouched. --------------------------------------------------------------------- */ @media (max-width: 374px) { .mn-icon-btn { display: none; } /* .mn-sec-head (section title + prev/next/"view all" cluster, reused by every lobby row) is a no-wrap flex row in frame.css; at 320px its two halves (~105px title + ~190px actions + 12px gap = 307px) no longer fit the ~286px content width left after .mn-main-scroll's 16px padding, and — because flex items don't wrap by default — the excess bubbles up through .mn-main-scroll into a page-level scrollWidth overflow even though no element's own bounding box visually crosses the viewport edge. Allowing the row to wrap onto two lines below 375px removes that overflow with a pure layout change (title above, prev/next/"view all" below) — no content dropped, no markup touched. */ .mn-sec-head { flex-wrap: wrap; row-gap: var(--sp-2); } } /* --------------------------------------------------------------------- 11. Crypto-count strip overflow fix (≤320px) .mn-crypto-counts (frame.css) is a no-wrap flex row with a 20px gap between the two "N