:root {
    --bg: #080808;
    --panel: #111214;
    --panel-2: #191a1d;
    --line: #3d3d3d;
    --gold: #e1c325;
    --gold-bright: #ffe84a;
    --gold-dark: #8f7600;
    --text: #f7f7f7;
    --muted: #aaa;
    --green: #2fbd68;
    --orange: #e6a51c;
    --red: #d84949;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background:
        radial-gradient(circle at 50% -10%, rgba(225,195,37,.12), transparent 28rem),
        linear-gradient(180deg, #0e0e0f 0, var(--bg) 32rem);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.container { width: min(1460px, calc(100% - 32px)); margin-inline: auto; }
.site-header { background: #0b0b0c; border-top: 6px solid #303847; box-shadow: 0 8px 30px rgba(0,0,0,.42); position: relative; z-index: 5; }
.topline { min-height: 27px; display: flex; justify-content: center; gap: 20px; align-items: center; padding: 4px 10px; font-size: 11px; color: #d3d3d3; border-bottom: 1px solid #292929; }
.header-main { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: block; width: min(330px, 38vw); }
.brand img { display: block; width: 100%; max-height: 72px; object-fit: contain; object-position: left center; }
.login-area { display: grid; grid-template-columns: 82px 92px; gap: 8px; align-items: center; }
.button { height: 37px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; border-radius: 2px; }
.button-login { background: #535353; }
.button-register { color: #fff; background: linear-gradient(#d5bc28,#9e8500); }
.gold-nav { min-height: 45px; display: flex; align-items: center; color: #fff; background: linear-gradient(180deg, #8c7600 0%, #e2c81c 52%, #a98e00 100%); box-shadow: inset 0 1px rgba(255,255,255,.25); }
.nav-inner { display: flex; justify-content: center; align-items: center; gap: 48px; font-size: 13px; font-weight: 800; }
.nav-inner strong { color: #161616; background: rgba(255,255,255,.45); padding: 8px 18px; border-radius: 3px; }
main { padding: 24px 0 52px; }
.hero { min-height: 235px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; padding: 36px 50px; margin-bottom: 18px; border: 1px solid rgba(225,195,37,.42); border-radius: 10px; background:
    radial-gradient(circle at 78% 45%, rgba(255,222,42,.22), transparent 18rem),
    linear-gradient(120deg, #101216 0%, #20242a 55%, #0d0e10 100%);
    box-shadow: 0 15px 45px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.04);
}
.hero-copy { max-width: 850px; }
.eyebrow { margin: 0 0 7px; color: var(--gold-bright); font-size: 12px; font-weight: 900; letter-spacing: 1.4px; }
.hero h1, .content-head h1 { margin: 0; line-height: 1.06; }
.hero h1 { font-size: clamp(32px, 5vw, 62px); text-transform: uppercase; }
.hero p:not(.eyebrow) { max-width: 760px; line-height: 1.65; color: #c8c8c8; }
.hero-button { display: inline-flex; padding: 12px 25px; margin-top: 22px; border-radius: 99px; color: #0d0d0d; font-weight: 900; background: linear-gradient(180deg, #fff16a, #c7a900); box-shadow: 0 6px 18px rgba(225,195,37,.22); }
.hero-badge { width: 170px; aspect-ratio: 1; display: grid; place-content: center; text-align: center; border: 9px double #e6c72a; border-radius: 50%; background: radial-gradient(circle, #292600, #0b0b0b 72%); transform: rotate(-5deg); }
.hero-badge span { color: var(--gold-bright); font-size: 62px; font-weight: 900; line-height: .9; }
.hero-badge small { margin-top: 10px; font-weight: 900; letter-spacing: 1.5px; }
.provider-section { display: grid; grid-template-columns: 38px minmax(0,1fr) 38px; align-items: stretch; margin: 0 0 22px; padding: 10px; border-top: 3px solid var(--gold); border-bottom: 1px solid #383838; background: #171819; }
.provider-strip { display: flex; gap: 11px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #8d8d8d #303030; padding-bottom: 8px; }
.provider-strip::-webkit-scrollbar { height: 8px; }
.provider-strip::-webkit-scrollbar-track { background: #303030; }
.provider-strip::-webkit-scrollbar-thumb { background: #929292; border-radius: 8px; }
.provider-link { flex: 0 0 190px; min-height: 92px; display: grid; grid-template-rows: 57px auto; place-items: center; gap: 5px; padding: 9px 12px; border: 1px solid #5a5a5a; border-radius: 7px; background: #232426; transition: .18s ease; }
.provider-link:hover { transform: translateY(-2px); border-color: var(--gold); }
.provider-link.active { border-color: var(--gold-bright); background: linear-gradient(145deg, #403900, #252525 65%); box-shadow: inset 0 0 0 1px rgba(255,232,74,.26); }
.provider-link img { display: block; max-width: 160px; max-height: 52px; object-fit: contain; }
.provider-link span { color: #e3e3e3; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.provider-arrow { border: 0; color: #fff; background: transparent; font-size: 39px; cursor: pointer; }
.provider-arrow:hover { color: var(--gold-bright); }
.content-head { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin: 24px 0 16px; padding-bottom: 17px; border-bottom: 1px solid #4b4213; }
.content-head h1 { font-size: clamp(25px, 3vw, 38px); }
.content-head p:last-child { color: var(--muted); margin: 8px 0 0; }
.search-box { width: min(390px, 100%); display: grid; gap: 7px; color: #d1d1d1; font-size: 12px; font-weight: 700; }
.search-box input { width: 100%; height: 43px; padding: 0 14px; color: #fff; border: 1px solid #555; border-radius: 6px; outline: none; background: #171719; }
.search-box input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(225,195,37,.13); }
.game-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 16px; }
.game-card { min-width: 0; overflow: hidden; border: 1px solid #373737; border-radius: 8px; background: linear-gradient(180deg, #1a1b1d, #111214); box-shadow: 0 8px 22px rgba(0,0,0,.2); transition: transform .18s, border-color .18s; }
.game-card:hover { transform: translateY(-3px); border-color: #8e7917; }
.game-link { display: block; padding: 10px; }
.game-image-wrap { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; background: #242424; }
.game-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.image-fallback { position: absolute; inset: 0; display: none; place-content: center; padding: 15px; text-align: center; color: #bfbfbf; font-weight: 800; background: linear-gradient(145deg,#222,#101010); }
.game-name { min-height: 37px; display: flex; align-items: center; justify-content: center; margin: 9px 0 7px; color: #fff; font-size: 12px; font-weight: 800; text-align: center; line-height: 1.25; overflow: hidden; }
.rtp-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; color: #ccc; font-size: 10px; font-weight: 800; }
.rtp-value { color: #fff; }
.progress { position: relative; height: 18px; overflow: hidden; border: 1px solid #2f2f2f; border-radius: 4px; background: #090909; }
.progress-bar { width: 0; height: 100%; transition: width .55s ease; background-size: 28px 28px; background-image: linear-gradient(45deg, rgba(255,255,255,.13) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.13) 50%, rgba(255,255,255,.13) 75%, transparent 75%, transparent); animation: stripe 1.2s linear infinite; }
.progress-bar.success { background-color: var(--green); }
.progress-bar.warning { background-color: var(--orange); }
.progress-bar.info { background-color: #3c9dc9; }
.progress-bar.danger { background-color: var(--red); }
@keyframes stripe { to { background-position: 28px 0; } }
.pattern { position: relative; margin-top: 16px; padding: 18px 7px 7px; border-radius: 5px; background: #252629; }
.pattern-title { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); min-width: 90px; padding: 5px 15px 8px; border-radius: 0 0 40px 40px; color: #111; text-align: center; font-size: 12px; font-weight: 900; background: var(--gold); box-shadow: 0 1px #ffe453; }
.pattern-row { min-height: 23px; display: grid; align-items: center; gap: 2px; font-size: 10px; }
.pattern-row-pragmatic { grid-template-columns: minmax(22px,.7fr) repeat(3,18px) minmax(38px,1fr); }
.pattern-row-pg { grid-template-columns: minmax(30px,1fr) 24px minmax(45px,1.2fr); }
.pattern-number { color: #fff; font-weight: 800; text-align: left; }
.pattern-mode { color: #ddd; text-align: right; white-space: nowrap; }
.pattern-icon { display: inline-grid; place-items: center; font-size: 16px; font-weight: 900; }
.pattern-icon.yes { color: #26b868; }
.pattern-icon.no { color: #d94b55; }
.pattern-unavailable { min-height: 63px; display: grid; place-content: center; padding: 5px; color: #e2b0b0; text-align: center; font-size: 11px; line-height: 1.35; }
.load-more-wrap { display: flex; justify-content: center; min-height: 74px; padding-top: 25px; }
.load-more { padding: 12px 30px; cursor: pointer; color: #141414; border: 0; border-radius: 999px; font-weight: 900; background: linear-gradient(#fff267,#b99e00); }
.load-more:hover { filter: brightness(1.08); }
.load-more[hidden] { display: none; }
.empty { grid-column: 1 / -1; padding: 60px 20px; color: #bdbdbd; border: 1px dashed #454545; text-align: center; border-radius: 8px; background: #111; }
.noscript { padding: 20px; color: #fff; text-align: center; background: #822; }
.site-footer { border-top: 1px solid #39330c; background: #060606; }
.footer-inner { min-height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #aaa; font-size: 12px; }
.footer-inner p { max-width: 620px; margin: 0; text-align: center; line-height: 1.5; }
.footer-inner a { color: var(--gold-bright); font-weight: 900; }
@media (max-width: 1250px) { .game-grid { grid-template-columns: repeat(6,minmax(0,1fr)); } }
@media (max-width: 1060px) {
    .header-main { flex-direction: column; padding: 14px 0; }
    .brand { width: min(340px, 72vw); }
    .login-area { grid-template-columns: 82px 92px; width: min(720px,100%); }
    .game-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
@media (max-width: 850px) {
    .hero { padding: 28px; }
    .hero-badge { width: 125px; }
    .hero-badge span { font-size: 44px; }
    .game-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .content-head { align-items: stretch; flex-direction: column; }
    .search-box { width: 100%; }
    .footer-inner { padding: 20px 0; flex-direction: column; }
}
@media (max-width: 650px) {
    .container { width: min(100% - 20px, 1460px); }
    .topline { justify-content: space-between; gap: 8px; font-size: 9px; }
    .login-area { grid-template-columns: 1fr 1fr; }
    .button { height: 40px; border-radius: 4px; }
    .gold-nav { min-height: 42px; }
    .nav-inner { justify-content: space-between; gap: 8px; font-size: 10px; }
    .nav-inner strong { padding: 7px 10px; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    main { padding-top: 12px; }
    .hero { min-height: auto; padding: 24px 20px; }
    .hero h1 { font-size: 31px; }
    .hero-badge { display: none; }
    .provider-section { grid-template-columns: 27px minmax(0,1fr) 27px; padding: 7px 2px; }
    .provider-link { flex-basis: 142px; min-height: 82px; grid-template-rows: 48px auto; }
    .provider-link img { max-width: 118px; max-height: 44px; }
    .provider-arrow { font-size: 30px; padding: 0; }
    .content-head { margin-top: 19px; }
    .game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .game-link { padding: 8px; }
    .game-name { font-size: 11px; }
    .pattern-row { font-size: 9px; }
    .pattern-row-pragmatic { grid-template-columns: minmax(20px,.7fr) repeat(3,17px) minmax(35px,1fr); }
}