@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;800&display=swap"); :root { --pitch-green: #78ff91; --pitch-green-dark: #22c55e; --brand-blue: #00098a; --brand-blue-light: #0e9bff; --brand-red: #e0380c; --text-primary: #041c4c; --text-muted: #4a5d78; --surface: #ffffff; --surface-soft: #f4f8fc; --surface-tint: #e8f5ec; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-pill: 999px; --shadow-card: 0 4px 24px rgba(0, 9, 138, 0.08); --shadow-elevated: 0 12px 40px rgba(0, 9, 138, 0.12); --shadow-glow: 0 8px 28px rgba(120, 255, 145, 0.25); --gradient-brand: linear-gradient(135deg, #66bd76 0%, #0e9bff 52%, #00098a 100%); --gradient-cta-hot: linear-gradient(90deg, #df390c 0%, #ff3344 100%); --header-height: 70px; --content-pad: clamp(12px, 4vw, 20px); --max-content: 1200px; } *, *::before, *::after { box-sizing: border-box; } body { background: linear-gradient(180deg, #f8fafc 0%, #eef3ff 48%, #f8fafc 100%); color: var(--text-primary); font-family: "Roboto", system-ui, -apple-system, sans-serif; font-weight: 400; font-size: clamp(15px, 1.6vw, 16px); line-height: 1.55; -webkit-font-smoothing: antialiased; margin: 0 auto; padding: 0; overflow-x: clip; } main { overflow-x: clip; } ul { list-style: none; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-family: "Roboto", sans-serif; font-weight: 700; color: #041c4c; } a, a:visited { text-decoration: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } h2, h2 a { font-size: 2.369em; line-height: 1.2em; } h3, h3 a { font-size: 1.777em; line-height: 1.2em; } h4, h4 a { font-size: 1em; } h4, h4 a { font-size: 1.333em; line-height: 1.2em; } h4 { margin: 10px 0; } a { color: #0073e6; } .page-wrapper { position: relative; width: 100%; max-width: var(--max-content); margin: 0 auto; padding: 32px 0 60px; } .page-content { margin: 0 var(--content-pad) 30px; position: relative; font-weight: 400; font-size: 1em; line-height: 1.65em; color: var(--text-primary); max-width: 100%; } .img-container.img-title { padding-top: var(--header-height); margin-top: 0; margin-bottom: 0; } .img-container.img-title figure { margin: 0; line-height: 0; } .img-title a { display: block; max-width: 1200px; margin: 0 auto; } .img-container.img-title figure a img { border-radius: 0; } .page-title { padding-top: 80px; } .page-title.homepage { padding-top: 0; } .page-title-wrapper { max-width: 1200px; margin: 0 auto; } .page-title-container { padding: 20px 0 0; margin: 0 15px; } .page-title-container h1 { font-weight: 700; font-size: 3.157em; line-height: 1.1em; } .page-paragraph { line-height: 1.85em; padding-bottom: 1.45em; } .remove-space { padding: 0; } .page-heading { margin: 10px 0; } .page-list { margin-bottom: 1.45em; } .page-list.regular li { padding-bottom: 7px; } ol, .disc { margin-left: 30px; } ol li, .disc li { padding: 5px; } .disc li { list-style: disc; } ul.space-mark li { position: relative; padding: 5px 5px 5px 35px; } ul.space-mark li:before { background-image: url(images/check-mark.svg); background-repeat: no-repeat; background-size: contain; content: ""; display: block; height: 20px; left: 5px; position: absolute; top: 7px; width: 20px; } .btn-container { text-align: center; } .btn-container .btn-link { position: relative; display: inline-block; transition: all 0.3s; text-decoration: none; } .btn-container .btn-link .btn-wrap { display: flex; align-items: center; justify-content: center; padding: 14px 28px; color: #fff; background: var(--gradient-brand); border-radius: var(--radius-pill); font-weight: 700; letter-spacing: 0.02em; box-shadow: var(--shadow-glow); } .btn-container .btn-link .btn-wrap:hover { box-shadow: 0 10px 32px rgba(14, 155, 255, 0.45); -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .img-container { margin-top: 0.45em; margin-bottom: 1.45em; } .img-container figure { text-align: center; } .img-container figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 5px; } .pt-20 { padding-top: 20px; } .pb-20 { padding-bottom: 20px; } .pt-40 { padding-top: 40px; } .pb-40 { padding-bottom: 40px; } .game-demo { text-align: center; margin: 20px auto; } .game-demo-title { font-size: 1.5em; margin-bottom: 20px; } .game-demo-frame { position: relative; width: 100%; max-width: 900px; aspect-ratio: 16/9; margin: 0 auto; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); border: 1px solid rgba(14, 155, 255, 0.15); } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 5; overflow: hidden; } .overlay::before { content: ""; position: absolute; inset: 0; background: url("https://penaltyshoot-out.net/images/carousel-image-4.png") center/cover no-repeat; transform: scale(1.06); filter: blur(4px); z-index: 5; } .overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 9, 138, 0.25) 0%, rgba(0, 9, 138, 0.55) 50%, rgba(0, 0, 0, 0.72) 100% ); z-index: 6; } .overlay-content { position: relative; z-index: 10; text-align: center; padding: clamp(16px, 4vw, 24px); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 12px; width: min(100%, 300px); } .game-demo-frame .btn, .game-demo-frame a.btn { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0; padding: 14px 18px; font-size: clamp(0.875rem, 3.2vw, 1rem); font-weight: 600; line-height: 1.25; text-align: center; border-radius: var(--radius-pill); cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; z-index: 10; -webkit-appearance: none; appearance: none; } .game-demo-frame .btn.demo-btn { background: rgba(255, 255, 255, 0.1); color: #fff; border: 2px solid rgba(255, 255, 255, 0.92); } .game-demo-frame .btn.demo-btn:hover { background: rgba(255, 255, 255, 0.2); color: #fff; border-color: var(--pitch-green); box-shadow: 0 6px 20px rgba(120, 255, 145, 0.35); } .game-demo-frame a.btn.play-btn { background: var(--brand-blue-light); color: #fff; border: 2px solid var(--brand-blue-light); text-decoration: none; } .game-demo-frame a.btn.play-btn:hover { background: var(--pitch-green-dark); border-color: var(--pitch-green-dark); color: #fff; box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4); } .hidden { display: none; } iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .author-block { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 10px; } .author-block figure { float: left; margin: 1.5em 1em 0.5em 0; } .linkedin-icon { position: absolute; top: 130px; left: 75px; } .author-block p { padding-bottom: 15px; line-height: 1.45em; } .footer { width: 100%; } .menu-container { padding: 45px 0; background-color: #f1f3f4; } .footer-wrapper { position: relative; padding: 35px 15px 35px; background: #000; } .footer-container .useful-info { max-width: 1170px; display: flex; align-items: end; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 0 auto 50px; max-width: 1170px; display: flex; } .useful-info .contact-info { display: flex; flex-direction: column; gap: 0.5vh; float: left; color: #ffffff; } .useful-info .contact-info a { color: #78ff91; } .useful-info ul { margin-top: 15px; } .useful-info ul li { margin: 5px 0; } .footer .copyright { width: 100%; text-align: center; float: left; color: #fff; font-size: 0.75em; font-weight: 400; line-height: 1.25em; } .footer .images-block { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; } @keyframes display { 0% { transform: translateX(325px); opacity: 0; } 10% { transform: translateX(0); opacity: 1; } 30% { transform: translateX(0); opacity: 1; } 40% { transform: translateX(-325px); opacity: 0; } 100% { transform: translateX(-325px); opacity: 0; } } .pic-ctn { position: relative; width: min(100%, 720px); max-width: 100%; aspect-ratio: 16 / 9; height: auto; margin: 24px auto; overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .pic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; animation: display 9s infinite; } .pic picture, .pic img { width: 100%; height: 100%; object-fit: cover; display: block; } .pic:nth-child(2) { animation-delay: 3s; } .pic:nth-child(3) { animation-delay: 6s; } .table-wrapper { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); } .game-overview.secondary { width: 100%; max-width: 100%; } .game-overview.secondary .table-container { width: 100%; } .game-overview.secondary .table-container thead tr { background: linear-gradient(90deg, #66bd76, #0e9bff); } .game-overview.secondary .table-container th { padding: 10px; color: #fff; vertical-align: middle; } .game-overview.secondary .table-container td { text-align: center; vertical-align: middle; } .game-overview.secondary .payout-table td:first-child { width: auto; } .flex-gap { flex-grow: 1; max-width: 40px; min-width: 0; } .table-content { flex-shrink: 1; min-width: 300px; overflow-x: auto; } .testimonials-wrapper { display: flex; justify-content: center; } figure.testimonial { position: relative; overflow: hidden; margin: 10px 0 10px 10px; min-width: 230px; max-width: 500px; color: #000000; text-align: center; padding: 10px; background-image: linear-gradient(180deg, #d3fdff, #fff); } figure.testimonial *, figure.testimonial *:before, figure.testimonial *:after { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } figure.testimonial figcaption { width: 100%; } figure.testimonial h2, figure.testimonial h4, figure.testimonial blockquote { margin: 0; } figure.testimonial h2, figure.testimonial h4 { font-weight: 300; } figure.testimonial h4 { color: #5f5858; } figure.testimonial blockquote { color: #58677c; font-size: 1em; padding: 25px 10px 20px 15px; margin-top: 30px; background-color: #ffffff; border-radius: 5px; box-shadow: inset -1.4px -1.4px 2px rgba(0, 0, 0, 0.3); text-align: left; position: relative; } figure.testimonial blockquote:before { content: ""; position: absolute; top: -30px; left: 20px; width: 70px; height: 70px; background-image: url(images/quotes.png); background-size: contain; background-repeat: no-repeat; opacity: 0.3; } figure.testimonial .profile { width: 100px; border-radius: 50%; display: inline-block; box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.4); margin-bottom: 10px; border: solid 5px #ffffff; } .btn-with-img-block { display: flex; align-items: center; justify-content: center; flex-direction: column; } .btn-with-img-block .img-container { margin: 0; } .img-container .game-container-play { width: 180px; min-width: 169px; margin-left: 10px; object-fit: cover; position: relative; z-index: 1; filter: blur(0px); margin: 0 auto; border-radius: 0; } .btn-with-img-block .btn-container { margin-top: 40px; } .btn-with-img-block .btn-container .btn-link { width: 190px; } .btn-with-img-block .img-container .try-your-luck { width: 100%; max-width: min(472px, 100%); height: auto; } .btn-with-img-block .btn-container .btn-link .btn-wrap { border-radius: 5px; padding: 20px; justify-content: center; } .accordion { width: 100%; text-align: left; } .article { padding: clamp(12px, 3vw, 16px); margin: 0.75em auto; background: var(--surface); border-radius: var(--radius-md); border: 1px solid rgba(14, 155, 255, 0.1); box-shadow: var(--shadow-card); } .article span { display: block; font-size: 1.333em; line-height: 1.2em; font-weight: 700; margin: 10px 0; } .article span, .article div { cursor: pointer; color: #041c4c; } .article div { padding-bottom: 3px; border-bottom: 2px solid #feeacf; } input[type="radio"] { appearance: none; position: fixed; top: -100vh; left: -100vh; } input[type="radio"] ~ div { max-height: 0; overflow: hidden; transition: max-height 0.5s; } input[type="radio"]:checked ~ div { max-height: 200px; } .game-overview h2 { font-size: 1.77rem; line-height: 2rem; margin-bottom: 15px; } .game-overview-container { display: block; width: 100%; max-width: 100%; } .flex-gap { flex-grow: 1; max-width: 40px; min-width: 0; } .game-overview-container .img-container figure img { object-fit: cover; height: 438px; } .game-overview { background: var(--surface); margin-top: 0.45rem; border-radius: var(--radius-md); box-shadow: var(--shadow-card); border: 1px solid rgba(14, 155, 255, 0.1); min-width: 0; width: 100%; max-width: 100%; text-align: center; padding: clamp(16px, 3vw, 24px); } .game-overview h3 { margin-bottom: 25px; text-align: start; } .game-overview table { width: 100%; border-collapse: collapse; } .game-overview table td { padding: 10px; border-bottom: 1px solid #ddd; text-align: left; } .game-overview.primary .overview-table td:first-child { font-weight: bold; color: #444; white-space: nowrap; width: 42%; vertical-align: top; } .game-overview.primary .overview-table td:last-child { width: 58%; word-break: break-word; white-space: normal; } .game-overview.primary .overview-label { display: inline-flex; align-items: center; gap: 0.35em; white-space: nowrap; max-width: 100%; } .game-overview.primary .overview-emoji { flex: 0 0 auto; display: inline-block; line-height: 1; font-size: 1.05em; } .game-overview.secondary .deposit-table { table-layout: fixed; width: 100%; } .game-overview.secondary .deposit-table th { width: 50%; text-align: left; white-space: nowrap; vertical-align: middle; padding: 12px 10px; line-height: 1.25; } .game-overview.secondary .deposit-table .table-th-label { display: inline-flex; align-items: center; gap: 0.35em; white-space: nowrap; } .game-overview.secondary .deposit-table .table-th-emoji { flex: 0 0 auto; line-height: 1; } .game-overview.secondary .deposit-table td { text-align: left; vertical-align: top; padding: 10px; line-height: 1.4; word-break: break-word; } .game-overview.secondary .deposit-table td:first-child { width: 44%; } .game-overview.secondary .deposit-table td:last-child { width: 56%; } .game-overview.secondary .deposit-table .deposit-method { display: inline-flex; align-items: flex-start; gap: 0.35em; max-width: 100%; } .game-overview.secondary .deposit-table .deposit-emoji { flex: 0 0 auto; line-height: 1.35; } .game-overview.secondary .deposit-table .deposit-text { flex: 1; min-width: 0; } .game-overview.secondary .payout-table { width: 100%; } .game-overview.secondary .payout-table th, .game-overview.secondary .payout-table td { text-align: center; vertical-align: middle; white-space: nowrap; padding: 10px 8px; font-size: clamp(0.8rem, 2.4vw, 0.95rem); } .game-overview table td strong { font-weight: bold; } .game-overview table tr:last-child td { border-bottom: none; } .cta-block { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; width: min(100%, 768px); max-width: 100%; min-height: clamp(220px, 52vw, 400px); margin: 24px auto 0; padding: clamp(20px, 5vw, 36px); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-elevated); border: 1px solid rgba(120, 255, 145, 0.25); isolation: isolate; } .cta-block::before { content: ""; position: absolute; inset: 0; background: url("images/cta-penalty.jpg") center/cover no-repeat; z-index: 0; } .cta-block::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 9, 138, 0.15) 0%, rgba(0, 9, 138, 0.55) 55%, rgba(0, 9, 138, 0.85) 100% ); z-index: 1; } .cta-block h3 { position: relative; z-index: 2; text-align: center; font-size: clamp(1.25rem, 5.5vw, 2.75rem); line-height: 1.15; color: #fff; width: 100%; max-width: 18ch; margin: 0 0 16px; text-shadow: 0 2px 16px rgba(0, 9, 138, 0.6); } .cta-block .btn-container { position: relative; z-index: 2; bottom: auto; width: 100%; } .video-container { width: 100%; aspect-ratio: 16 / 9; position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); margin-bottom: 30px; } .video-container .youtube-bg-img { width: 100%; max-width: 830px; } .video-container .youtube-play-img { position: absolute; top: 45%; left: 43.5%; display: block; width: 100px; height: auto; } @media (max-width: 695px) { .video-container .youtube-play-img { width: 12.3vw; min-width: 40px; } } iframe { width: 100%; height: 100%; border: none; } .play-now-container { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 100%; margin: 28px auto; padding: 0 var(--content-pad); } .play-now-container .img-container { position: static !important; left: auto !important; width: 100%; max-width: 360px; margin: 0 auto; } .play-now-container figure { display: flex; flex-direction: column; align-items: center; width: 100%; } .play-now-container .btn-container { margin: 16px 0 0 !important; width: 100%; max-width: 280px; } .play-now-container .link-img { position: static; top: auto; right: auto; width: 100%; } .play-now-container .img-container figure a { display: inline-block; } .play-now-container.footballer .link-img, .play-now-container.girl .link-img { top: 0; right: 0; } .play-now-container .btn-container .btn-link .btn-wrap { } .play-now-container .btn-container .btn-link .btn-wrap:hover { } .play-now-container.footballer .btn-container { } .play-now-container.footballer .btn-container .btn-link .btn-wrap { margin: 0; } .play-now-container.footballer .btn-container .btn-link .btn-wrap:hover { } .play-now-container.girl .btn-container { margin: 16px 0 0 !important; } .play-now-container.girl .btn-container .btn-link .btn-wrap { } .play-now-container.girl .btn-container .btn-link .btn-wrap:hover { } .game-rules { max-width: var(--max-content); margin: 32px auto 0; padding: 0 var(--content-pad); text-align: center; } .game-rules .page-heading { text-align: center; margin-left: auto; margin-right: auto; } .game-rules > p { text-align: center; max-width: 42rem; margin: 0 auto; color: var(--text-muted); } .game-rules .steps { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; max-width: 720px; margin-left: auto; margin-right: auto; text-align: left; } .game-rules .odd, .game-rules .even { position: static; left: auto; right: auto; } .game-rules .step { display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, 3vw, 20px); margin: 0; border-radius: var(--radius-md); background: var(--surface); border: 1px solid rgba(14, 155, 255, 0.12); box-shadow: var(--shadow-card); } .game-rules .step ul { margin: 0; } .game-rules .step p { text-align: left; margin: 0; } .game-rules .step span { display: inline-flex; align-self: flex-start; align-items: center; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--gradient-brand); color: #fff; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; } .game-rules .img-container { margin: 4px 0; max-width: 100%; } .game-rules .img-container figure img { width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .game-rules p { font-size: 1rem; line-height: 1.6; } @media screen and (max-width: 1024px) { .page-title { min-height: auto; } .pic-ctn { width: min(100%, 720px); height: auto; aspect-ratio: 16 / 9; } } @media screen and (max-width: 1024px) and (min-width: 768px) { .page-title-container h1 { font-size: 2.369em; } } @media (max-width: 991px) { .game-demo-frame { aspect-ratio: 16 / 9; height: auto; max-height: none; } } @media screen and (max-width: 767px) { .page-wrapper { padding: 15px 0 0; } .game-overview-container { gap: 0; } .game-overview-container .img-container figure img { object-fit: contain; height: auto; } .game-overview { min-width: auto; } .game-overview.secondary { width: auto; } .testimonials-wrapper { flex-direction: column; align-items: center; } .footer.pt-20 { padding-top: 20px; } .footer-wrapper { padding: 28px var(--content-pad) calc(var(--_cdpn-mobile-menu-circle-size, 6.25rem) * 0.55 + 12px); } .footer-container .useful-info { flex-direction: column; align-items: center; justify-content: center; gap: 20px; margin-bottom: 20px; } .useful-info .contact-info { text-align: center; float: none; width: 100%; } .footer .images-block { width: 100%; } .footer .copyright { float: none; padding: 0; } .page-title-container h1 { font-size: 1.777em; } .author-block { margin: 10px 0 1.45em 0; flex-direction: column; align-items: start; flex-wrap: wrap; } } @media screen and (max-width: 479px) { input, textarea, button { font-size: 13px; } } @media screen and (max-width: 576px) { .cta-block .btn-container .btn-link .btn-wrap { padding: 12px 18px; } } @media screen and (max-width: 409px) { .timeline-item { width: auto; } .timeline-item h3 { font-size: 20px; } .timeline-item p { font-size: 15px; } } .header__container { width: 100% !important; max-width: var(--max-content); box-sizing: border-box; padding-left: var(--content-pad) !important; padding-right: var(--content-pad) !important; } .page-title-container h1 { font-size: clamp(1.65rem, 5.5vw, 3.157em); line-height: 1.12; } .page-heading { font-size: clamp(1.35rem, 4vw, 2.369em); line-height: 1.2; } .game-overview h2 { font-size: clamp(1.25rem, 4vw, 1.77rem); text-align: center; } .game-overview .table-container { min-width: 0; } .game-overview table { font-size: clamp(0.85rem, 2.8vw, 1rem); } .game-overview.secondary .table-container thead tr { background: var(--gradient-brand); } @media screen and (min-width: 768px) { .game-overview-container { display: flex; gap: 20px; align-items: flex-start; } .game-overview.secondary { width: 100%; } .play-now-container.footballer, .play-now-container.girl { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 20px; } } @media screen and (max-width: 767px) { body { padding-bottom: 0; } main { padding-bottom: 0; } .header { padding-top: 0; padding-bottom: 0; height: var(--header-height); } .page-title { padding-top: 0; } .page-title.homepage .page-title-container { padding-top: 12px; } .img-container.img-title { padding-top: var(--header-height); margin: 0; } .img-container.img-title figure a img { display: block; width: 100%; height: auto; object-fit: cover; vertical-align: top; } .game-demo-frame { aspect-ratio: 16 / 9; height: auto; max-height: none; } .game-overview.primary .overview-table { table-layout: fixed; font-size: clamp(0.78rem, 2.6vw, 0.95rem); } .game-overview.primary .overview-table td { padding: 8px 6px; } .game-overview.primary .overview-table td:first-child { white-space: nowrap; width: 48%; min-width: 0; font-size: clamp(0.72rem, 2.4vw, 0.88rem); } .game-overview.primary .overview-table .overview-label { white-space: nowrap; } .game-overview.primary .overview-table td:last-child { width: 52%; white-space: normal; } .game-overview.secondary .deposit-table th { font-size: clamp(0.68rem, 2.15vw, 0.82rem); padding: 10px 6px; } .game-overview.secondary .deposit-table td { font-size: clamp(0.75rem, 2.3vw, 0.88rem); padding: 8px 6px; } .game-overview.secondary .deposit-table td:first-child { width: 46%; } .game-overview.secondary .deposit-table td:last-child { width: 54%; } .game-overview.secondary .payout-table { min-width: 320px; } .game-overview.secondary .payout-table th, .game-overview.secondary .payout-table td { font-size: clamp(0.68rem, 2.1vw, 0.82rem); padding: 8px 4px; } .table-content { min-width: 0; width: 100%; } .btn-with-img-block .btn-container { margin-top: 20px; width: 100%; max-width: 320px; } .btn-with-img-block .btn-container .btn-link { width: 100%; } .btn-with-img-block .btn-container .btn-link .btn-wrap { width: 100%; justify-content: center; } h2, h2 a { font-size: clamp(1.35rem, 5vw, 2.369em); } } @media screen and (max-width: 576px) { .cta-block { min-height: clamp(200px, 58vw, 320px); } .cta-block .btn-container .btn-link { width: 100%; max-width: 280px; } .page-content { margin-left: 12px; margin-right: 12px; } } .header .ref-buttons .ref-primary, .header a.ref-primary { background: var(--gradient-brand) !important; border: none; box-shadow: var(--shadow-glow); display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; max-width: none; height: auto; padding: 10px 18px; border-radius: var(--radius-pill); font-size: 14px; line-height: 1.2; white-space: nowrap; flex-shrink: 0; } .header a.ref-primary:hover { box-shadow: 0 8px 24px rgba(14, 155, 255, 0.45) !important; }