* { scroll-behavior: smooth; }
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset { margin: 0; padding: 0; }
:focus::placeholder { opacity: 0; }
::placeholder { color: #A4A2A0; opacity: 1; }
body { background: #fff; color: #232323; font-family: Open Sans, Tahoma, Arial, Verdana; font-size: 100%; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
nav { background: #fff; box-shadow: 0 3px 40px 0 rgba(0,0,0,0.1); width: 100%; position: sticky; top: 0; border-top: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6; z-index: 100; }
.nav { max-width: 1000px; margin: 0 auto; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; position: relative; }
.nav .logo { background: url(images/nav-logo.png) no-repeat; width: 220px; height: 32px; }
.menu { display: flex; list-style: none; font-size: 95%; font-weight: bold; }
.menu li a { text-transform: uppercase; color: #333; text-decoration: none; display: block; transition: 0.3s; padding: 12px; opacity: 0.67; }
.menu li a:hover { color: #FF1D00; opacity: 1; }
.menu li a.bonus { color: #fafafa; background: #FF1D00; padding: 10px 15px; border-radius: 25px; margin-left: 10px; }
.menu li a.bonus:hover { background: #EA2100; color: #fff; }
.menu a.en, .menu a.es, .menu a.pt, .menu a.de, .menu a.fr, .menu a.it, .menu a.pl, .menu a.ua  { background-repeat: no-repeat; background-position: center center; width: 25px; height: 16px; }
.menu a.en { background-image: url(images/en.png); }
.menu a.es { background-image: url(images/es.png); }
.menu a.pt { background-image: url(images/pt.png); }
.menu a.de { background-image: url(images/de.png); }
.menu a.fr { background-image: url(images/fr.png); }
.menu a.it { background-image: url(images/it.png); }
.menu a.pl { background-image: url(images/pl.png); }
.menu a.ua { background-image: url(images/ua.png); }
.menu-toggle { display: none; cursor: pointer; width: 32px; height: 22px; position: relative; z-index: 101; }
.menu-toggle span { display: block; position: absolute; height: 4px; width: 100%; background: #12344A; border-radius: 3px; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; }
.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2), .menu-toggle span:nth-child(3) { top: 10px; }
.menu-toggle span:nth-child(4) { top: 20px; }
.menu-toggle.active span:nth-child(1), .menu-toggle.active span:nth-child(4) { top: 10px; width: 0; left: 50%; }
.menu-toggle.active span:nth-child(2) { transform: rotate(45deg); }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg); }
.header, .footer { color: #fafafa; width: 100%; margin: 0 auto; position: relative; padding: 20px 0; overflow: hidden; }
.header::before, .footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('images/bg.jpg') no-repeat center center; background-size: cover; filter: blur(0) brightness(0.5); z-index: -1; }
header, main, footer { width: 1000px; margin: 0 auto; }
header h1 { font-size: 200%; margin: 0; line-height: 1.25; text-shadow: 0 1px rgba(0,0,0,0.1); }
header h2 { font-size: 175%; margin: 0; line-height: 1.25; text-shadow: 0 1px rgba(0,0,0,0.1); overflow: hidden; }
header p { margin: 10px 0; text-shadow: 0 1px rgba(0,0,0,0.1); }
header img { float: right; margin: 10px 0 10px 10px; border-radius: 5px; box-shadow: 3px 3px rgba(0,0,0,0.1); }
header ul li, footer ul li { display: inline-block; margin: 0 10px 10px 0; }
header ul li a, footer ul li a { padding: 1px 5px; background: rgba(255,255,255,0.1); border-bottom: 1px dashed rgba(255,255,255,0.3); color: #f0f0f0; text-decoration: none; transition: 0.3s; border-radius: 2px; }
header ul li a:hover, footer ul li a:hover { background: rgba(0,0,0,0.3); color: #fff; }
main { position: relative; padding-bottom: 20px; overflow: hidden; }
main a { font-size: 100%; font-weight: bold; text-decoration: none; color: #00B0E6; box-shadow: 0px -2px 0px 0px #00B0E6 inset; transition: all 0.3s; }
main a:hover { color: #301B25; box-shadow: 0px -2px 0px 0px #301B25 inset; }
section { padding-top: 20px; }
section h2 { font-size: 175%; margin: 0; line-height: 1.25; text-shadow: 0 1px rgba(0,0,0,0.1); overflow: hidden; }
section h3 { font-size: 140%; margin: 10px 0; line-height: 1.25; text-shadow: 0 1px rgba(0,0,0,0.1); overflow: hidden; }
section p { margin: 10px 0; text-shadow: 0 1px rgba(0,0,0,0.1); }
section p em { letter-spacing: 1px; }
section ul, section ol { margin: 10px 0; text-shadow: 0 1px rgba(0,0,0,0.1); padding-left: 25px; }
section table { width: 100%; border-collapse: collapse; font-size: 85%; color: #333; background-color: #f8f8f8; margin: 2% 0 0 0; cursor: default; }
section th, section td { padding: 12px 15px; text-align: left; }
section th { background-color: #e0e0e0; font-weight: bold; color: #333; }
section table tr:hover { background-color: #f0f0f0; transition: all 0.3s; }
section table tr:nth-child(even) { background: #f0f0f0; }
section table td { border-top: 1px solid #ddd; }
section img { width: 100%; height: auto; display: block; margin: 15px 0; }
button { font-weight: bold; display: inline-block; border: 0; padding: 4px 25px 4px 6px; cursor: pointer; color: #fafafa; background: #1A7B81 url(images/copycode.png) no-repeat center right; transition: all 0.3s; border-radius: 5px; }
button:hover { background: #01424A url(images/copycode.png) no-repeat center right; }
.reg { padding: 4px 6px 4px 25px; background: #FF1D00 url(images/reg.png) no-repeat center left;  color: #fff; font-weight: bold; border-radius: 5px; cursor: pointer; }
.reg:hover { background: #EA2100 url(images/reg.png) no-repeat center left; }
.fs { padding: 4px 6px 4px 25px; background: #5CB907 url(images/spin.png) no-repeat center left; color: #fff; border-radius: 5px; }
.faq { max-width: 100%; margin: 10px auto 0 auto; }
.faq h3 { font-size: 100%; border-bottom: 1px solid #e0e0e0; padding: 15px 40px 15px 20px; margin: 0 0 1px 0; cursor: pointer; position: relative; background-color: #f8f8f8; transition: background-color 0.3s; }
.faq h3:hover { background-color: #f0f0f0; }
.faq p { max-height: 0; overflow: hidden; margin: 0; padding: 0 20px; transition: max-height 0.3s ease-out, padding 0.3s; }
.faq .icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; transition: transform 0.3s; }
.faq .icon::before, .faq .icon::after { content: ''; position: absolute; background: #333; transition: all 0.3s; }
.faq .icon::before { width: 100%; height: 2px; top: 50%; transform: translateY(-50%); }
.faq .icon::after { height: 100%; width: 2px; left: 50%; transform: translateX(-50%); }
.faq h3.active .icon { transform: translateY(-50%) rotate(45deg); }
.faq h3.active + p { max-height: 500px; padding: 15px 20px; margin-bottom: 10px; }
.bubble-white, .bubble-blue { position: absolute; border-radius: 50%; bottom: -50px; opacity: 0; animation-timing-function: ease-in; animation-iteration-count: infinite; animation-name: rise; }
.bubble-white { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); animation-duration: 5s; }
.bubble-blue { background: rgba(0, 130, 180, 0.10); border: 1px solid rgba(0, 130, 180, 0.35); box-shadow: 0 0 10px rgba(0, 130, 180, 0.15); animation-duration: 7s; }
.container { display: flex; justify-content: center; align-items: center; height: 100%; }
.player-container { position: relative; width: 100%; max-width: 100%; padding-top: 56.25%; background: #e0e0e0; border-radius: 3px; overflow: hidden; margin: 20px auto; }
.preview { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)),  url(images/player-bg.jpg) center/cover; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s; }
.play-button-container { position: relative; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.play-button { width: 70px; height: 70px; z-index: 2; position: relative; }
.pulse-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: rgba(255, 255, 255, 0.5); z-index: 1; animation: pulse 2s infinite; }
.game-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; display: none; }
.fullscreen-button { position: absolute; top: 0; right: 12px; width: 30px; height: 30px; background: transparent; border: none; cursor: pointer; display: none; z-index: 3; padding: 0; }
.fullscreen-icon { width: 100%; height: 100%; object-fit: contain; }
.loading { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 2; }
.loader { width: 40px; height: 40px; border: 4px solid rgba(0,0,0,0.1); border-top: 4px solid #333; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 16px; }
.loading-text { color: #333; font-size: 16px; }
footer {padding: 0 15px;}
footer p { text-align: center; margin: 0 0 1% 0; line-height: 1.5; font-size: 95%; }
footer p.copyrights { font-size: 70%; color: #999; }
@media (max-width: 1040px) { header, main, footer { max-width: 100%; box-sizing: border-box; } header h1, header h2, section h2 { margin: 0 20px; } header p, section p { margin: 10px 15px; } header ul, section ul, section ol { margin: 10px 15px; } header img { margin: 10px 15px; } section h3 { padding: 0 20px; } .nav { max-width: 100%; } }
@media (max-width: 768px) { section table { display: block; width: 100%; } section thead { display: none; } section tbody { display: block; width: 100%; } section tr { display: block; margin: 10px; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 1px 5px rgba(0,0,0,0.1); background: #fff; } section td { display: block; text-align: right; padding: 10px 15px; border-bottom: 1px solid #eee; position: relative; } section td:last-child { border-bottom: none; } section td::before { content: attr(data-label); position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-weight: bold; text-align: left; } .nav { padding: 20px; } .menu { position: absolute; top: 100%; left: 0; width: 100%; background: #f8f8f8; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .menu.active { max-height: 500px; } .menu li { border-top: 1px solid #eee; background: #fff; display: block; text-align: center; } .menu li a { color: #301B25; padding: 15px; } .menu li:not(:last-child) a[class]:not(.bonus) { width: 25px; margin: 0 auto; display: inline-block; } .menu li a.bonus { width: auto; max-width: 200px; padding: 15px; display: inline-block; text-align: center; border-radius: 25px; margin: 10px auto; } .menu-toggle { display: block; } header img { float: none; display: block; margin: 20px auto; } }
@media (max-width: 480px) { .play-button-container, .play-button { width: 60px; height: 60px; } .fullscreen-button { top: 10px; right: 10px; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); } 70% { box-shadow: 0 0 0 20px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes rise { 0% { transform: translateY(0) scale(1); opacity: 0.6; } 50% { opacity: 0.8; } 100% { transform: translateY(-100vh) scale(1.1); opacity: 0; } }