/* Google Font loaded via in HTML */
:root {
--bg-body: #0b1120;
--bg-header: #0b1120;
--bg-section: #131c2e;
--bg-section-alt: #0f1828;
--text-primary: #ffffff;
--text-secondary: rgba(255, 255, 255, 0.55);
--text-accent: #4a9eff;
--btn-primary-bg: #22c55e;
--btn-primary-text: #0b1120;
--btn-primary-hover: #16a34a;
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.15);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: var(--bg-body);
color: var(--text-primary);
font-family: 'Inter', sans-serif;
line-height: 1.6;
}
/* ─── HEADER ─────────────────────────────────────────── */
header {
background: var(--bg-header);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 100;
padding: 0.75rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
nav ul {
display: flex;
gap: 1.5rem;
list-style: none;
align-items: center;
padding: 0;
margin: 0;
}
nav a {
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: color 0.2s ease;
}
nav a:hover {
color: #ffffff;
}
nav a[aria-current="page"] {
color: #ffffff;
border-bottom: 2px solid var(--btn-primary-bg);
}
.nav-toggle,
#navToggle {
display: none;
min-height: 44px;
min-width: 44px;
background: none;
border: none;
color: var(--text-primary);
font-size: 1.5rem;
cursor: pointer;
align-items: center;
justify-content: center;
}
/* Header action buttons group */
.header-actions {
display: flex;
align-items: center;
gap: 0.625rem;
flex-shrink: 0;
}
/* ─── HERO BANNER (Ocean Floor) ─────────────────────── */
.hero-banner {
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse at 20% 15%, rgba(0, 60, 160, 0.45) 0%, transparent 55%),
radial-gradient(ellipse at 80% 10%, rgba(50, 10, 100, 0.35) 0%, transparent 45%),
radial-gradient(ellipse at 50% 85%, rgba(15, 60, 30, 0.2) 0%, transparent 40%),
linear-gradient(180deg, #040c1e 0%, #07142a 50%, #0a1c35 80%, #0b1e2e 100%);
border: 1px solid var(--border);
border-radius: 20px;
padding: 0;
min-height: 380px;
display: flex;
align-items: center;
max-width: calc(100% - 2rem);
margin: 1.5rem auto;
}
/* Light shafts from surface */
.hero-banner::before {
content: '';
position: absolute;
top: -10%;
left: 15%;
width: 160px;
height: 130%;
background: linear-gradient(180deg, rgba(60, 140, 255, 0.07) 0%, transparent 100%);
transform: rotate(-12deg);
pointer-events: none;
}
.hero-banner::after {
content: '';
position: absolute;
top: -10%;
left: 40%;
width: 90px;
height: 130%;
background: linear-gradient(180deg, rgba(60, 140, 255, 0.04) 0%, transparent 100%);
transform: rotate(-6deg);
pointer-events: none;
}
/* ── Bubbles ── */
.hero-banner__bubbles {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
@keyframes bubble-rise {
0% { transform: translateY(0) translateX(0); opacity: 0.55; }
50% { transform: translateY(-50%) translateX(8px); opacity: 0.3; }
100% { transform: translateY(-110%) translateX(-4px); opacity: 0; }
}
.bubble {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(120, 190, 255, 0.3);
background: radial-gradient(circle at 35% 35%, rgba(200, 230, 255, 0.25), rgba(100, 180, 255, 0.04));
animation: bubble-rise ease-in infinite;
}
.b1 { width: 8px; height: 8px; bottom: 12%; left: 7%; animation-duration: 7s; animation-delay: 0s; }
.b2 { width: 14px; height: 14px; bottom: 6%; left: 17%; animation-duration: 9s; animation-delay: 1.5s; }
.b3 { width: 6px; height: 6px; bottom: 22%; left: 28%; animation-duration: 6s; animation-delay: 0.8s; }
.b4 { width: 10px; height: 10px; bottom: 8%; left: 43%; animation-duration: 8s; animation-delay: 2.2s; }
.b5 { width: 16px; height: 16px; bottom: 18%; left: 56%; animation-duration: 11s; animation-delay: 0.3s; }
.b6 { width: 7px; height: 7px; bottom: 5%; left: 66%; animation-duration: 7.5s; animation-delay: 3s; }
.b7 { width: 12px; height: 12px; bottom: 28%; left: 79%; animation-duration: 9.5s; animation-delay: 1s; }
.b8 { width: 5px; height: 5px; bottom: 10%; left: 89%; animation-duration: 6.5s; animation-delay: 4s; }
/* ── Sand floor ── */
.hero-sand {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background:
radial-gradient(ellipse 50% 70% at 25% 100%, rgba(170, 138, 65, 0.3) 0%, transparent 100%),
radial-gradient(ellipse 60% 80% at 75% 100%, rgba(150, 118, 52, 0.25) 0%, transparent 100%),
linear-gradient(to top, rgba(140, 108, 50, 0.4) 0%, rgba(110, 85, 38, 0.12) 55%, transparent 100%);
pointer-events: none;
}
.hero-sand::before {
content: '';
position: absolute;
bottom: 10px;
left: 0;
right: 0;
height: 18px;
background:
radial-gradient(ellipse 90px 7px at 18% 50%, rgba(190, 158, 78, 0.22) 0%, transparent 100%),
radial-gradient(ellipse 70px 5px at 40% 50%, rgba(190, 158, 78, 0.16) 0%, transparent 100%),
radial-gradient(ellipse 80px 6px at 62% 50%, rgba(190, 158, 78, 0.2) 0%, transparent 100%),
radial-gradient(ellipse 55px 5px at 84% 50%, rgba(190, 158, 78, 0.14) 0%, transparent 100%);
}
/* ── Plants ── */
.hero-plants {
position: absolute;
bottom: 42px;
display: flex;
align-items: flex-end;
gap: 5px;
pointer-events: none;
z-index: 1;
}
.hero-plants--left { left: 16px; }
.hero-plants--right { right: 16px; }
@keyframes sway-l {
0%, 100% { transform: rotate(-7deg); }
50% { transform: rotate(5deg); }
}
@keyframes sway-r {
0%, 100% { transform: rotate(7deg); }
50% { transform: rotate(-5deg); }
}
.seaweed {
display: block;
transform-origin: bottom center;
border-radius: 50% 50% 15% 15%;
}
.sw-1 { width: 10px; height: 88px; background: linear-gradient(to top, #0a5020, #19a045, #0dc848); animation: sway-l 3.2s ease-in-out infinite; }
.sw-2 { width: 8px; height: 65px; background: linear-gradient(to top, #094018, #148034, #0ca03c); animation: sway-r 2.8s ease-in-out infinite; animation-delay: 0.4s; }
.sw-3 { width: 12px; height: 108px; background: linear-gradient(to top, #0a5020, #1a9840, #12d050); animation: sway-l 3.7s ease-in-out infinite; animation-delay: 0.9s; }
.sw-4 { width: 7px; height: 58px; background: linear-gradient(to top, #094018, #128030); animation: sway-r 2.5s ease-in-out infinite; animation-delay: 1.3s; }
.sw-5 { width: 11px; height: 92px; background: linear-gradient(to top, #0a5020, #19a045, #0dc848); animation: sway-r 3.0s ease-in-out infinite; animation-delay: 0.6s; }
.sw-6 { width: 9px; height: 72px; background: linear-gradient(to top, #094018, #148034); animation: sway-l 2.7s ease-in-out infinite; animation-delay: 1.1s; }
.sw-7 { width: 13px; height: 100px; background: linear-gradient(to top, #0a5820, #1a9840, #14c848); animation: sway-r 3.5s ease-in-out infinite; animation-delay: 0.3s; }
/* ── Coral ── */
.coral { position: relative; }
.coral--1 {
width: 26px; height: 38px;
background: radial-gradient(circle at 50% 75%, #c83855, #901830);
border-radius: 50% 50% 20% 20%;
margin: 0 3px;
}
.coral--1::before {
content: ''; position: absolute;
bottom: 26px; left: -7px;
width: 17px; height: 26px;
background: radial-gradient(circle at 50% 75%, #c83855, #901830);
border-radius: 50% 50% 30% 30%;
transform: rotate(-28deg);
}
.coral--1::after {
content: ''; position: absolute;
bottom: 26px; right: -7px;
width: 17px; height: 26px;
background: radial-gradient(circle at 50% 75%, #c83855, #901830);
border-radius: 50% 50% 30% 30%;
transform: rotate(28deg);
}
.coral--2 {
width: 22px; height: 32px;
background: radial-gradient(circle at 50% 75%, #d85c18, #a03808);
border-radius: 50% 50% 20% 20%;
margin: 0 3px;
}
.coral--2::before {
content: ''; position: absolute;
bottom: 22px; left: -6px;
width: 15px; height: 22px;
background: radial-gradient(circle at 50% 75%, #d85c18, #a03808);
border-radius: 50% 50% 30% 30%;
transform: rotate(-22deg);
}
.coral--2::after {
content: ''; position: absolute;
bottom: 22px; right: -6px;
width: 15px; height: 22px;
background: radial-gradient(circle at 50% 75%, #d85c18, #a03808);
border-radius: 50% 50% 30% 30%;
transform: rotate(22deg);
}
/* ── Inner layout (text centered) ── */
.hero-banner__inner {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
max-width: 1100px;
margin: 0 auto;
width: 100%;
padding: 3.5rem 2rem 5.5rem;
text-align: center;
}
/* ── Content ── */
.hero-banner__content {
text-align: center;
}
.hero-banner__subtitle {
color: rgba(255, 255, 255, 0.65);
font-size: 1rem;
font-weight: 500;
margin-bottom: 0.25rem;
letter-spacing: 0.02em;
}
.hero-banner__title {
color: #ffffff;
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.5rem;
border: none;
padding: 0;
}
.hero-banner__amount {
color: #f5c542;
font-size: 5rem;
font-weight: 800;
line-height: 1;
margin-bottom: 1.5rem;
letter-spacing: -0.03em;
text-shadow:
0 0 40px rgba(245, 197, 66, 0.55),
0 0 80px rgba(245, 197, 66, 0.2);
}
.hero-banner__cta {
font-size: 1rem;
padding: 0.875rem 2.5rem;
margin-bottom: 1.5rem;
display: inline-flex;
}
/* ── Payment badges ── */
.hero-banner__payments {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
justify-content: center;
}
.hero-banner__payment-badge {
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 6px;
padding: 0.25rem 0.625rem;
font-size: 0.72rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.65);
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* ─── MAIN CONTENT ───────────────────────────────────── */
main {
max-width: 1100px;
margin: 0 auto;
padding: 2rem 1rem;
}
h1 {
color: var(--text-primary);
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
}
section {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
margin-bottom: 2rem;
}
.section--transparent {
background: transparent;
border-color: transparent;
}
section h2 {
margin-top: 0;
border-bottom: 1px solid var(--border-strong);
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
h2 {
color: var(--text-accent);
font-size: 1.5rem;
font-weight: 700;
border-bottom: 1px solid var(--border-strong);
padding-bottom: 0.5rem;
margin-top: 0;
}
main > section {
position: relative;
}
main > section + section {
margin-top: 0;
}
.mobile-section {
padding: 1.5rem 2rem;
}
.mobile-card {
position: relative;
overflow: hidden;
padding: 1.5rem 2rem 1.75rem;
border-radius: 16px;
border: 1px solid var(--border);
background:
radial-gradient(140px 140px at 85% 10%, rgba(74, 158, 255, 0.18) 0%, transparent 65%),
radial-gradient(180px 180px at 10% 85%, rgba(34, 197, 94, 0.18) 0%, transparent 70%),
linear-gradient(140deg, rgba(15, 24, 40, 0.9), rgba(10, 17, 30, 0.95));
box-shadow: 0 18px 40px rgba(3, 8, 20, 0.45);
}
.mobile-card::after {
content: '';
position: absolute;
inset: 1px;
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.04);
pointer-events: none;
}
.mobile-card p {
margin-bottom: 1rem;
color: rgba(255, 255, 255, 0.82);
font-weight: 400;
}
.mobile-perks {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.75rem;
}
.mobile-perks li {
position: relative;
padding: 0.75rem 0.9rem 0.75rem 2.25rem;
border-radius: 12px;
background: rgba(11, 17, 32, 0.6);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.9);
}
.mobile-perks li::before {
content: '';
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
left: 0.85rem;
top: 1.05rem;
background: var(--btn-primary-bg);
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
}
/* ─── MOBILE CASINO PAGE ─────────────────────────────── */
.device-card {
padding: 1rem;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(135deg, rgba(15, 24, 40, 0.75), rgba(11, 19, 34, 0.85));
box-shadow: 0 12px 28px rgba(3, 8, 20, 0.35);
}
.device-card table {
margin: 0;
}
h3 {
color: var(--text-primary);
font-size: 1.1rem;
font-weight: 600;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
.section-subtitle {
display: flex;
align-items: center;
gap: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.75);
}
.section-subtitle::before {
content: '';
height: 2px;
width: 36px;
border-radius: 999px;
background: linear-gradient(90deg, #4a9eff, #22c55e);
}
p {
margin-bottom: 1rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.82);
}
.section-cta {
margin-top: 1.25rem;
text-align: center;
}
.section-body > :last-child {
margin-bottom: 0;
}
/* ─── TABLE ──────────────────────────────────────────── */
table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--border-strong);
}
th {
background: #0d1829;
color: var(--text-accent);
padding: 0.85rem 1.1rem;
text-align: left;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
border-bottom: 2px solid rgba(74, 158, 255, 0.3);
white-space: nowrap;
}
td {
padding: 0.85rem 1.1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
vertical-align: middle;
}
tr:nth-child(odd) td {
background: rgba(255, 255, 255, 0.02);
}
tr:nth-child(even) td {
background: rgba(255, 255, 255, 0.05);
}
tr:last-child td {
border-bottom: none;
}
tr:hover td {
background: rgba(74, 158, 255, 0.07);
transition: background 0.15s ease;
}
/* ─── CASINO CARD ────────────────────────────────────── */
.casino-card {
display: flex;
align-items: center;
gap: 1.5rem;
background: var(--bg-section);
border: 1px solid var(--border-strong);
border-left: 4px solid var(--btn-primary-bg);
border-radius: 12px;
padding: 1.25rem 1.5rem;
margin: 1.5rem 0;
flex-wrap: wrap;
}
.casino-card__logo {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
min-width: 72px;
}
.casino-card__logo img {
width: 52px;
height: 52px;
object-fit: contain;
border-radius: 10px;
}
.casino-card__name {
font-size: 0.78rem;
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
.casino-card__bonus {
display: flex;
flex-direction: column;
gap: 0.2rem;
flex: 1;
min-width: 180px;
}
.casino-card__bonus-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-accent);
font-weight: 600;
}
.casino-card__bonus-value {
font-size: 1.1rem;
color: var(--text-primary);
font-weight: 700;
}
.casino-card__badges {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
flex: 1;
min-width: 200px;
}
.casino-card__badge {
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--border-strong);
border-radius: 6px;
padding: 0.3rem 0.65rem;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.75);
white-space: nowrap;
}
.casino-card__cta {
white-space: nowrap;
flex-shrink: 0;
}
/* ─── DEPOSIT CARDS ──────────────────────────────────── */
.deposit-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 1.5rem 0 1rem;
}
.deposit-card {
background: var(--bg-section);
border: 1px solid var(--border-strong);
border-radius: 12px;
padding: 1.5rem 1.25rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.4rem;
}
.deposit-card--featured {
border-color: var(--btn-primary-bg);
box-shadow: 0 0 0 1px var(--btn-primary-bg), 0 4px 20px rgba(34,197,94,0.15);
}
.deposit-card__step {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-accent);
margin-bottom: 0.5rem;
}
.deposit-card__main {
font-size: 2.2rem;
font-weight: 800;
color: var(--text-primary);
line-height: 1;
}
.deposit-card--featured .deposit-card__main {
color: var(--btn-primary-bg);
}
.deposit-card__sub {
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: 0.75rem;
}
.deposit-card__details {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
border-top: 1px solid var(--border);
padding-top: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.deposit-card__details li {
display: flex;
justify-content: space-between;
font-size: 0.82rem;
}
.deposit-card__details li span {
color: var(--text-secondary);
}
.deposit-card__details li strong {
color: var(--text-primary);
}
.deposit-cards__cta {
display: block;
width: fit-content;
margin: 0 auto 1.5rem;
}
@media (max-width: 600px) {
.deposit-cards {
grid-template-columns: 1fr;
}
}
/* ─── PAYMENT GRID ───────────────────────────────────── */
.payment-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.payment-card {
background: var(--bg-section-alt);
border: 1px solid var(--border);
border-radius: 14px;
padding: 1rem 1.25rem;
box-shadow: 0 12px 26px rgba(3, 8, 20, 0.35);
}
.payment-card__title {
font-size: 1rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.85rem;
}
.payment-card__row {
display: flex;
justify-content: space-between;
gap: 0.75rem;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.65);
padding: 0.35rem 0;
border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.payment-card__row:last-child {
border-bottom: none;
}
.payment-card__row span:last-child {
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
}
/* ─── DEPOSIT NOTE ───────────────────────────────────── */
.deposit-note {
margin-top: 1.25rem;
padding: 1.25rem 1.5rem;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(135deg, rgba(15, 24, 40, 0.75), rgba(11, 19, 34, 0.85));
box-shadow: 0 12px 28px rgba(3, 8, 20, 0.35);
}
.deposit-note p {
margin-bottom: 0.85rem;
}
.deposit-note p:last-child {
margin-bottom: 0;
}
/* ─── RESPONSIBLE GAMBLING PANEL ─────────────────────── */
.safety-panel {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
gap: 1.25rem;
padding: 1.5rem 1.75rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.12);
background:
radial-gradient(240px 240px at 15% 0%, rgba(74, 158, 255, 0.1) 0%, transparent 60%),
radial-gradient(220px 220px at 100% 100%, rgba(34, 197, 94, 0.08) 0%, transparent 60%),
linear-gradient(140deg, rgba(12, 20, 38, 0.7), rgba(12, 21, 38, 0.8));
box-shadow: 0 14px 28px rgba(3, 8, 20, 0.28);
}
.safety-panel__badge {
width: 52px;
height: 52px;
border-radius: 16px;
display: grid;
place-items: center;
font-size: 1.4rem;
background: rgba(74, 158, 255, 0.14);
color: #c7defa;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.safety-panel__content p {
margin-bottom: 1rem;
color: rgba(255, 255, 255, 0.86);
}
.safety-panel__content p:last-child {
margin-bottom: 0;
}
/* ─── LINKS ──────────────────────────────────────────── */
a {
color: var(--text-accent);
transition: color 0.2s ease;
}
a:hover {
color: #7bbfff;
}
strong {
color: var(--text-primary);
font-weight: 600;
}
/* ─── FOOTER ─────────────────────────────────────────── */
footer {
background: var(--bg-section);
border-top: 1px solid var(--border);
text-align: center;
padding: 2rem;
margin-top: 3rem;
font-size: 0.85rem;
color: var(--text-secondary);
}
footer a {
color: var(--text-accent);
}
footer a:hover {
color: #7bbfff;
}
/* ─── BUTTONS ────────────────────────────────────────── */
.btn-play {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.625rem 1.5rem;
background: var(--btn-primary-bg);
color: var(--btn-primary-text);
border-radius: 10px;
text-decoration: none;
font-weight: 700;
font-size: 0.9rem;
font-family: 'Inter', sans-serif;
cursor: pointer;
border: none;
line-height: 1.4;
transition: background 0.2s ease, transform 0.1s ease;
white-space: nowrap;
}
.btn-play:hover {
background: var(--btn-primary-hover);
color: var(--btn-primary-text);
transform: translateY(-1px);
}
.btn-login {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.625rem 1.25rem;
background: transparent;
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 10px;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
font-family: 'Inter', sans-serif;
cursor: pointer;
line-height: 1.4;
transition: border-color 0.2s ease, background 0.2s ease;
white-space: nowrap;
}
.btn-login:hover {
border-color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.06);
color: var(--text-primary);
}
.btn-header {
padding: 0.5rem 1.25rem;
font-size: 0.875rem;
min-height: unset;
}
.nav-play-mobile {
display: none;
}
/* ─── HIGHLIGHTS BLOCK ───────────────────────────────── */
.highlights {
background: linear-gradient(135deg, #0f1c35 0%, #131c2e 100%);
border: 1px solid rgba(74, 158, 255, 0.2);
border-radius: 14px;
padding: 1.5rem 2rem;
margin-bottom: 1.5rem;
}
.highlights__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem 1.5rem;
}
.highlights__item {
display: flex;
align-items: flex-start;
gap: 0.625rem;
color: rgba(255, 255, 255, 0.85);
font-size: 0.9rem;
line-height: 1.55;
margin: 0;
}
.highlights__icon {
flex-shrink: 0;
width: 20px;
height: 20px;
background: rgba(34, 197, 94, 0.15);
border: 1px solid rgba(34, 197, 94, 0.4);
border-radius: 50%;
color: #22c55e;
font-size: 0.7rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.1rem;
}
@media (max-width: 600px) {
.highlights__list {
grid-template-columns: 1fr;
}
.highlights {
padding: 1.25rem;
}
}
/* ─── FEATURE CARDS ──────────────────────────────────── */
.feature-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.875rem;
margin-top: 1.25rem;
}
.feature-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
transition: border-color 0.2s ease, background 0.2s ease;
}
.feature-card:hover {
border-color: rgba(74, 158, 255, 0.3);
background: rgba(74, 158, 255, 0.05);
}
.feature-card__icon {
font-size: 1.75rem;
line-height: 1;
margin-bottom: 0.25rem;
}
.feature-card__title {
color: #ffffff;
font-size: 0.95rem;
font-weight: 700;
margin: 0;
}
.feature-card__text {
color: rgba(255, 255, 255, 0.55);
font-size: 0.85rem;
line-height: 1.5;
margin: 0;
}
@media (max-width: 640px) {
.feature-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 400px) {
.feature-cards {
grid-template-columns: 1fr;
}
}
/* ─── HIGHLIGHT BARS ─────────────────────────────────── */
.highlight-bar {
display: flex;
gap: 1rem;
align-items: flex-start;
border-left: 3px solid;
border-radius: 0 10px 10px 0;
background: rgba(255, 255, 255, 0.03);
padding: 1rem 1.25rem;
margin-bottom: 0.75rem;
}
.highlight-bar:last-child {
margin-bottom: 0;
}
.highlight-bar--blue {
border-color: #4a9eff;
}
.highlight-bar--green {
border-color: #22c55e;
}
.highlight-bar__icon {
font-size: 1.4rem;
line-height: 1.6;
flex-shrink: 0;
}
.highlight-bar p {
margin: 0;
color: rgba(255, 255, 255, 0.8);
font-size: 0.92rem;
line-height: 1.7;
}
/* ─── STEPS TIMELINE ─────────────────────────────────── */
.steps {
list-style: none;
padding: 0;
margin: 1.25rem 0;
position: relative;
}
.steps__item {
display: flex;
gap: 1.25rem;
align-items: flex-start;
position: relative;
padding-bottom: 1.5rem;
margin: 0;
}
.steps__item:last-child {
padding-bottom: 0;
}
/* Vertical line between steps */
.steps__item:not(:last-child)::after {
content: '';
position: absolute;
left: 16px;
top: 36px;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, rgba(74, 158, 255, 0.4), rgba(74, 158, 255, 0.05));
}
.steps__marker {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, #4a9eff, #2260d0);
color: #ffffff;
font-size: 0.9rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 16px rgba(74, 158, 255, 0.35);
position: relative;
z-index: 1;
}
.steps__content {
padding-top: 0.4rem;
color: rgba(255, 255, 255, 0.85);
font-size: 0.92rem;
line-height: 1.6;
}
/* ─── BONUS TABS ─────────────────────────────────────── */
.bonus-tabs {
margin-top: 1.25rem;
}
.bonus-tabs__nav {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0;
}
.bonus-tabs__btn {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border);
border-bottom: none;
border-radius: 10px 10px 0 0;
color: rgba(255, 255, 255, 0.55);
cursor: pointer;
font-family: 'Inter', sans-serif;
font-size: 0.875rem;
font-weight: 600;
padding: 0.625rem 1.25rem;
transition: background 0.2s ease, color 0.2s ease;
white-space: nowrap;
}
.bonus-tabs__btn:hover {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.8);
}
.bonus-tabs__btn--active {
background: var(--bg-section);
border-color: rgba(74, 158, 255, 0.3);
border-bottom: 1px solid var(--bg-section);
color: #ffffff;
position: relative;
z-index: 1;
}
.bonus-tabs__panels {
background: var(--bg-section);
border: 1px solid rgba(74, 158, 255, 0.3);
border-radius: 0 10px 10px 10px;
padding: 1.5rem;
position: relative;
top: -1px;
}
.bonus-tabs__panel {
display: none;
}
.bonus-tabs__panel--active {
display: block;
}
.bonus-tabs__panel h3 {
margin-top: 0;
color: #4a9eff;
}
.bonus-tabs__panel ul {
list-style: none;
padding-left: 0;
margin: 1rem 0 0;
}
.bonus-tabs__panel li {
position: relative;
padding-left: 1.5rem;
margin-bottom: 0.6rem;
}
.bonus-tabs__panel li::before {
content: '';
position: absolute;
left: 0;
top: 0.55rem;
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, #4a9eff, #22c55e);
box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.12);
}
@media (max-width: 480px) {
.bonus-tabs__nav {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 0.35rem;
padding-bottom: 0;
margin-bottom: 0;
scrollbar-width: none;
}
.bonus-tabs__nav::-webkit-scrollbar {
height: 0;
}
.bonus-tabs__btn {
font-size: 0.78rem;
padding: 0.5rem 0.875rem;
}
.bonus-tabs__panels {
margin-top: 0;
}
}
/* ─── GAME SLIDERS ───────────────────────────────────── */
.game-slider {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.15) transparent;
margin: 0.75rem -0.25rem 1.5rem;
padding: 0.25rem 0.25rem 0.75rem;
}
.game-slider::-webkit-scrollbar {
height: 4px;
}
.game-slider::-webkit-scrollbar-track {
background: transparent;
}
.game-slider::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.15);
border-radius: 2px;
}
.game-slider__track {
display: flex;
gap: 0.75rem;
width: max-content;
}
.game-card {
position: relative;
width: 155px;
height: 210px;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
cursor: pointer;
background: linear-gradient(145deg, #131c2e, #1a2540);
border: 1px solid var(--border);
transition: transform 0.2s ease, border-color 0.2s ease;
}
.game-card:hover {
transform: translateY(-3px);
border-color: rgba(74, 158, 255, 0.4);
}
.game-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 12px;
}
/* Placeholder appearance when image fails to load */
.game-card img[src=""] ,
.game-card img:not([src]) {
display: none;
}
.game-card__name {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.5rem 0.625rem 0.6rem;
background: linear-gradient(to top, rgba(7,14,30,0.92) 0%, rgba(7,14,30,0.5) 60%, transparent 100%);
color: rgba(255,255,255,0.9);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.3;
pointer-events: none;
}
.game-card__overlay {
position: absolute;
inset: 0;
background: rgba(7, 14, 30, 0.72);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s ease;
border-radius: 12px;
}
/* Desktop: show on hover */
@media (hover: hover) {
.game-card:hover .game-card__overlay {
opacity: 1;
}
}
/* Mobile: show on tap (JS adds class) */
.game-card--active .game-card__overlay {
opacity: 1;
}
.game-card__btn {
font-size: 0.8rem;
padding: 0.5rem 1.1rem;
min-height: 36px;
border-radius: 8px;
}
/* ─── REVIEW CARD ────────────────────────────────────── */
.review-card {
background: var(--bg-section);
border-radius: 12px;
border: 1px solid var(--border);
padding: 1.5rem;
margin-bottom: 2rem;
}
.review-card__header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.review-card__header h3 {
margin: 0;
color: var(--text-accent);
}
.review-card__pros-cons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
.review-card__pros h4 {
color: #22c55e;
margin-bottom: 0.5rem;
}
.review-card__cons h4 {
color: #f87171;
margin-bottom: 0.5rem;
}
.review-card__pros ul,
.review-card__cons ul {
list-style: none;
padding-left: 0;
}
.review-card__pros ul li::before {
content: "✓ ";
color: #22c55e;
}
.review-card__cons ul li::before {
content: "✗ ";
color: #f87171;
}
.review-card__footer {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
text-align: right;
}
/* ─── FAQ ────────────────────────────────────────────── */
.faq {
margin: 2rem 0;
}
.faq__item {
background: var(--bg-section);
border: 1px solid var(--border);
border-radius: 10px;
margin-bottom: 0.6rem;
overflow: hidden;
transition: border-color 0.2s ease;
}
.faq__item:has(.faq__question[aria-expanded="true"]) {
border-color: var(--text-accent);
}
.faq__item h3 {
margin: 0;
padding: 0;
border-bottom: none;
font-size: inherit;
color: inherit;
}
.faq__question {
width: 100%;
background: none;
border: none;
color: var(--text-primary);
font-size: 0.95rem;
font-weight: 600;
text-align: left;
padding: 1.1rem 1.25rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
transition: color 0.2s ease;
font-family: 'Inter', sans-serif;
}
.faq__question::after {
content: "+";
color: var(--text-accent);
font-size: 1.3rem;
font-weight: 400;
line-height: 1;
flex-shrink: 0;
width: 24px;
height: 24px;
border: 1px solid var(--border-strong);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.faq__question[aria-expanded="true"] {
color: var(--text-accent);
}
.faq__question[aria-expanded="true"]::after {
content: "−";
background: rgba(74, 158, 255, 0.12);
border-color: var(--text-accent);
}
.faq__answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq__answer p {
padding: 0 1.25rem 1.1rem;
margin: 0;
color: var(--text-primary);
font-size: 0.9rem;
line-height: 1.65;
border-top: 1px solid var(--border);
padding-top: 0.9rem;
}
.faq__answer p strong {
color: var(--text-primary);
font-weight: 700;
}
/* ─── LISTS ──────────────────────────────────────────── */
ol {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
ol li {
margin-bottom: 0.4rem;
padding-left: 0.5rem;
color: rgba(255, 255, 255, 0.82);
}
ul {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
ul li {
margin-bottom: 0.4rem;
color: rgba(255, 255, 255, 0.82);
}
/* ─── IMAGES ─────────────────────────────────────────── */
img {
max-width: 100%;
height: auto;
}
.casino-logo {
width: 120px;
height: 50px;
object-fit: contain;
display: block;
}
/* ─── SITE LOGO ──────────────────────────────────────── */
.site-logo a {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-primary);
font-size: 1.4rem;
font-weight: 800;
text-decoration: none;
letter-spacing: -0.03em;
transition: opacity 0.2s ease;
}
.site-logo a:hover {
opacity: 0.85;
color: var(--text-primary);
}
.site-logo img {
width: 52px;
height: 52px;
object-fit: contain;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
}
/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 768px) {
.btn-header {
display: none;
}
.btn-login.btn-header-login {
display: none;
}
.nav-play-mobile {
display: flex;
align-items: center;
padding: 0.5rem 0;
border-bottom: none !important;
}
.nav-play-mobile + .nav-play-mobile {
padding-top: 0;
}
.nav-play-mobile a {
width: 100%;
text-align: center;
}
.nav-toggle,
#navToggle {
display: flex;
}
nav ul {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #0f1828;
border-bottom: 1px solid var(--border);
padding: 1rem 2rem;
gap: 0;
z-index: 99;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
nav ul li {
min-height: 44px;
display: flex;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid var(--border);
}
nav ul li:last-child {
border-bottom: none;
}
nav ul.nav-open {
display: flex;
}
main {
padding: 1rem;
}
.hero-banner__inner {
padding: 2.5rem 1rem 4.5rem;
}
.hero-banner__amount {
font-size: 3.5rem;
}
.hero-plants--left { left: 4px; }
.hero-plants--right { right: 4px; }
.sw-3, .sw-7 { height: 70px; }
.mobile-card {
margin: 0;
padding: 1.25rem 1.25rem 1.5rem;
}
.safety-panel {
grid-template-columns: 1fr;
}
.safety-panel__badge {
width: 44px;
height: 44px;
border-radius: 12px;
}
}
@media (max-width: 480px) {
h1 {
font-size: 1.5rem;
}
h2 {
font-size: 1.25rem;
}
h3 {
font-size: 1rem;
}
p {
font-size: 0.95rem;
}
li {
font-size: 0.95rem;
}
table {
display: block;
overflow-x: auto;
}
td {
word-break: break-word;
}
th {
word-break: break-word;
}
thead {
display: none;
}
tr {
display: block;
margin-bottom: 1rem;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
tr:nth-child(even) td {
background: transparent;
}
td {
display: block;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--border);
text-align: left;
}
td::before {
content: attr(data-label);
display: block;
color: var(--text-accent);
font-weight: 600;
font-size: 0.75rem;
margin-bottom: 0.2rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.review-card__pros-cons {
grid-template-columns: 1fr;
}
section {
padding: 1rem;
}
}
/* Mobile sticky auth bar */
.mobile-auth-bar {
display: none;
}
@media (max-width: 768px) {
.mobile-auth-bar {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
gap: 10px;
padding: 10px 16px;
padding-bottom: calc(10px + env(safe-area-inset-bottom));
background: #0f172a;
border-top: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 -4px 16px rgba(0,0,0,0.4);
}
.mobile-auth-bar a {
flex: 1;
text-align: center;
padding: 12px 8px;
border-radius: 8px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
}
body {
padding-bottom: 70px;
}
}