@charset "UTF-8";
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body { overflow-x: hidden; max-width: 100vw; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, a, span, li { word-break: break-word; overflow-wrap: break-word; max-width: 100%; }

:root {
    --clr-primary: #8B4513; /* SaddleBrown */
    --clr-secondary: #D2B48C; /* Tan */
    --clr-accent: #FFD700; /* Gold */
    --clr-text-light: #FDF5E6; /* OldLace */
    --clr-text-dark: #36221A; /* Darker brown */
    --clr-background: #FAF0E6; /* Linen */
    --clr-background-dark: #A0522D; /* Sienna */
    --clr-background-darker: #5A2F1B; /* Even darker brown */
    --clr-success: #32CD32; /* LimeGreen */
    --clr-error: #DC143C; /* Crimson */

    --ff-heading: 'Playfair Display', serif;
    --ff-body: 'Montserrat', sans-serif;

    --fw-regular: 400;
    --fw-bold: 700;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    --hh: 80px; /* Header height */
}

body {
    font-family: var(--ff-body);
    color: var(--clr-text-dark);
    background-color: var(--clr-background);
    line-height: 1.6;
    padding-top: var(--hh);
}

/* Base Typography */
h1 {
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: var(--clr-primary);
    margin-bottom: 0.8em;
    line-height: 1.1;
}

h2 {
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
    font-size: clamp(2rem, 4vw, 3.5rem);
    color: var(--clr-background-darker);
    margin-bottom: 1em;
    text-align: center;
}

h3 {
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--clr-background-darker);
    margin-bottom: 0.6em;
}

h4 {
    font-family: var(--ff-body);
    font-weight: var(--fw-bold);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: var(--clr-background-darker);
    margin-bottom: 0.4em;
}

p {
    font-size: 1rem;
    margin-bottom: 1em;
}

a {
    color: var(--clr-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--clr-background-dark);
}

/* Utility Classes */
.fading-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fading-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Header */
.t8z {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--hh);
    background-color: var(--clr-background-darker);
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.c7x {
    max-width: 1200px;
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.d1w {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--clr-text-light);
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.d1w:hover {
    color: var(--clr-accent);
}

.b9v {
    width: 40px;
    height: 40px;
    fill: currentColor;
}

.g4f {
    display: block;
}

.e6s {
    display: flex;
    gap: 30px;
}

.k2u {
    color: var(--clr-text-light);
    font-weight: var(--fw-bold);
    font-size: 1.1rem;
    padding: 5px 0;
    position: relative;
}

.k2u::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--clr-accent);
    transition: width 0.3s ease;
}

.k2u:hover::after {
    width: 100%;
}

.h0p {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

.f7j {
    display: block;
    width: 30px;
    height: 3px;
    background-color: var(--clr-text-light);
    margin: 6px 0;
    transition: all 0.3s ease;
}

/* Mobile Nav Overlay */
.r1b {
    position: fixed;
    top: var(--hh);
    left: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    background-color: var(--clr-background-darker);
    transition: max-height 0.4s ease-in-out;
    z-index: 999;
}

.n3e {
    display: flex;
    flex-direction: column;
    padding: 20px;
    text-align: center;
}

.n3e.is-open {
    max-height: 100vh;
}

.l4p {
    color: var(--clr-text-light);
    padding: 15px 0;
    display: block;
    font-size: 1.2rem;
    font-weight: var(--fw-bold);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.l4p:last-child {
    border-bottom: none;
}

.l4p:hover {
    color: var(--clr-accent);
}

/* Hero Section */
.x9y {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 120px 20px 60px;
    overflow: hidden;
}

.v0d {
    background-image: url('img/pic-9.jpg');
}

.x9y::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.w2a {
    position: relative;
    z-index: 2;
    max-width: 900px;
    color: var(--clr-text-light);
}

.w2a h1 {
    color: var(--clr-accent);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

.j8c {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    margin-bottom: 2em;
    color: var(--clr-text-light);
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.o5f {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.m1q {
    background-color: var(--clr-primary);
    color: var(--clr-text-light);
    padding: 15px 30px;
    border-radius: var(--radius-md);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.m1q:hover {
    background-color: var(--clr-background-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.p0e {
    background-color: transparent;
    border: 2px solid var(--clr-accent);
    color: var(--clr-accent);
    box-shadow: none;
}

.p0e:hover {
    background-color: var(--clr-accent);
    color: var(--clr-background-darker);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* General Section Styling */
section {
    padding: 80px 20px;
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
}

/* Features Section */
.b5g {
    background-color: var(--clr-background);
    text-align: center;
}

.c2j {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.h6m {
    background-color: var(--clr-text-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.h6m:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.f3d {
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--clr-secondary);
}

.i7n {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.h6m:hover .i7n {
    transform: scale(1.05);
}

.p4s {
    color: var(--clr-primary);
    margin-top: 0;
    margin-bottom: 10px;
}

.g9t {
    color: var(--clr-text-dark);
    font-size: 0.95rem;
}

/* Stats Section */
.l0q {
    background-color: var(--clr-background-dark);
    color: var(--clr-text-light);
    text-align: center;
    padding: 60px 20px;
}

.k3v {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: auto;
}

.e5c {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: var(--radius-lg);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.j7k {
    font-family: var(--ff-heading);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: var(--fw-bold);
    color: var(--clr-accent);
    display: block;
    margin-bottom: 5px;
}

.m9p {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--clr-text-light);
}

/* Testimonials Section */
.t6n {
    background-color: var(--clr-background);
    text-align: center;
}

.d8r {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.q9w {
    background-color: var(--clr-text-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 30px;
    text-align: left;
    border-left: 5px solid var(--clr-primary);
}

.q9w .g9t {
    font-style: italic;
    color: var(--clr-text-dark);
    margin-bottom: 15px;
    line-height: 1.8;
}

.w1x {
    font-weight: var(--fw-bold);
    color: var(--clr-background-darker);
    font-size: 0.9rem;
}

/* CTA Banner Section */
.f0j {
    padding: 0;
    max-width: 100vw;
    margin: 0;
}

.v3t {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    background-color: var(--clr-background-darker);
    color: var(--clr-text-light);
    align-items: center;
    gap: 0;
}

.n6r {
    padding: 60px;
    text-align: center;
}

.n6r h2 {
    color: var(--clr-accent);
}

.n6r .j8c {
    color: var(--clr-text-light);
    margin-bottom: 1.5em;
}

.e4g {
    height: 500px;
    overflow: hidden;
}

/* FAQ Section */
.y2k {
    background-color: var(--clr-background);
}

.a5t {
    margin-top: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.r7u {
    margin-bottom: 15px;
    border: 1px solid var(--clr-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.p1x {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--clr-primary);
    color: var(--clr-text-light);
    padding: 18px 25px;
    font-size: 1.15rem;
    font-weight: var(--fw-bold);
    text-align: left;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: var(--radius-md);
}

.p1x:hover {
    background-color: var(--clr-background-dark);
}

.c6v {
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.3s ease;
}

.h8i {
    background-color: var(--clr-text-light);
    padding: 0 25px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    border-top: 1px solid var(--clr-secondary);
    color: var(--clr-text-dark);
}

.h8i.is-open {
    padding: 25px;
}

.h8i p {
    margin-bottom: 0;
}

/* Blog Section */
.g5b {
    background-color: var(--clr-background-dark);
    color: var(--clr-text-light);
}

.g5b h2 {
    color: var(--clr-accent);
}

.o2t {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.z1u {
    background-color: var(--clr-background-darker);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.z1u:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.h3l {
    height: 250px;
    overflow: hidden;
}

.z1u .i7n {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.z1u:hover .i7n {
    transform: scale(1.05);
}

.z1u h3 {
    color: var(--clr-accent);
    padding: 20px 25px 0;
    margin-bottom: 10px;
}

.z1u .g9t {
    color: var(--clr-text-light);
    padding: 0 25px 20px;
    font-size: 0.95rem;
}

.t4r {
    display: inline-block;
    background-color: var(--clr-primary);
    color: var(--clr-text-light);
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-weight: var(--fw-bold);
    margin: 0 25px 25px;
    transition: background-color 0.3s ease;
}

.t4r:hover {
    background-color: var(--clr-secondary);
    color: var(--clr-background-darker);
}

/* Game Section */
.m6q {
    background-color: var(--clr-background);
    text-align: center;
    padding: 80px 20px;
}

.e0l {
    max-width: 600px;
    margin: 40px auto 0;
    background-color: var(--clr-text-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    padding: 30px;
}

.z9v {
    background-color: var(--clr-primary);
    color: var(--clr-text-light);
    padding: 15px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 25px;
    font-size: 1.3rem;
    font-weight: var(--fw-bold);
}

.k5a {
    color: var(--clr-accent);
    font-family: var(--ff-heading);
}

.a1c {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.b4z {
    font-size: 1.1rem;
    font-weight: var(--fw-bold);
    color: var(--clr-background-darker);
}

.c5d {
    padding: 10px 15px;
    border: 2px solid var(--clr-secondary);
    border-radius: var(--radius-md);
    font-family: var(--ff-body);
    font-size: 1.1rem;
    width: 120px;
    text-align: center;
    -moz-appearance: textfield; /* Firefox */
}

.c5d::-webkit-outer-spin-button, /* Chrome, Safari, Edge */
.c5d::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.c5d:focus {
    outline: none;
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 3px rgba(var(--clr-primary-rgb), 0.2);
}

.d6e {
    background-color: var(--clr-success);
    color: var(--clr-text-light);
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: var(--fw-bold);
    transition: background-color 0.3s ease;
}

.d6e:hover {
    background-color: darken(var(--clr-success), 10%);
}

.f7h {
    border: 1px solid var(--clr-secondary);
    border-radius: var(--radius-lg);
    padding: 25px;
    background-color: var(--clr-background);
    min-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.g8i {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-bottom: 20px;
}

.h9j {
    background-color: var(--clr-background-dark);
    color: var(--clr-text-light);
    padding: 12px 25px;
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.h9j:hover {
    background-color: var(--clr-primary);
    transform: translateY(-2px);
}

.h9j:disabled {
    background-color: var(--clr-secondary);
    cursor: not-allowed;
    transform: none;
    opacity: 0.7;
}

.i0k {
    width: 100%;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--clr-text-dark);
}

.j1l {
    font-size: 1.2rem;
    font-style: italic;
    color: var(--clr-background-darker);
}

.l2m {
    margin-top: 20px;
    font-size: 1.2rem;
    font-weight: var(--fw-bold);
    padding: 15px 20px;
    border-radius: var(--radius-md);
    color: var(--clr-text-light);
    transition: background-color 0.4s ease;
}

.l2m.win {
    background-color: var(--clr-success);
}

.l2m.lose {
    background-color: var(--clr-error);
}

.n4o {
    font-size: 0.85rem;
    color: var(--clr-text-dark);
    margin-top: 40px;
    opacity: 0.8;
}

/* Blackjack Specific Styles */
.bj-tbl {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.hnd-area {
    background-color: var(--clr-background-dark);
    padding: 15px;
    border-radius: var(--radius-md);
}

.hnd-lbl {
    color: var(--clr-accent);
    margin-bottom: 10px;
    text-align: left;
}

.hnd-crds {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 120px;
    justify-content: center;
}

.crd {
    width: 70px;
    height: 100px;
    background-color: var(--clr-text-light);
    border-radius: var(--radius-sm);
    border: 1px solid var(--clr-background-darker);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    transition: transform 0.2s ease;
    /* Card Frame */
    background: linear-gradient(135deg, var(--clr-text-light) 0%, #E0E0D6 100%);
    border: 2px solid var(--clr-background-darker);
}

.crd.red-suit {
    color: #FF0000; /* Red for hearts/diamonds */
}

.crd.dark-suit {
    color: var(--clr-background-darker);
}

.crd-val {
    font-size: 1.2rem;
    line-height: 1;
}

.crd-tl {
    align-self: flex-start;
}

.crd-br {
    align-self: flex-end;
    transform: rotate(180deg);
}

.crd-sut {
    font-size: 1.8rem;
}

.bj-cntls {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.bj-btn {
    background-color: var(--clr-primary);
    color: var(--clr-text-light);
    padding: 12px 25px;
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.bj-btn:hover {
    background-color: var(--clr-background-dark);
    transform: translateY(-2px);
}

.bj-btn:disabled {
    background-color: var(--clr-secondary);
    cursor: not-allowed;
    transform: none;
    opacity: 0.7;
}

/* Slots Specific Styles */
.sl-mch {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 20px;
}

.sl-reels-cnt {
    display: flex;
    gap: 10px;
    background-color: var(--clr-background-darker);
    padding: 15px;
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    position: relative;
}

.sl-reel-wrap {
    width: 100px;
    height: 100px; /* Visible window height */
    overflow: hidden;
    border: 3px solid var(--clr-primary);
    border-radius: var(--radius-md);
    background-color: #333;
    position: relative;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
}

.sl-reel-wrap::before, .sl-reel-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 30px;
    z-index: 1;
    pointer-events: none;
}

.sl-reel-wrap::before {
    top: 0;
    background: linear-gradient(to bottom, var(--clr-background-darker) 0%, transparent 100%);
}

.sl-reel-wrap::after {
    bottom: 0;
    background: linear-gradient(to top, var(--clr-background-darker) 0%, transparent 100%);
}

.sl-reel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center the final symbol */
    transition: transform 0s linear;
    transform: translateY(0);
}

.sl-sym {
    font-size: 3rem;
    height: 100px; /* Each symbol takes up the window height */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-light);
    width: 100%;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.sl-reel.win-flash {
    box-shadow: 0 0 20px 5px var(--clr-success);
    transition: box-shadow 0.3s ease-in-out;
}

.sl-reel.lose-flash {
    box-shadow: 0 0 20px 5px var(--clr-error);
    transition: box-shadow 0.3s ease-in-out;
}

.sl-btn {
    background-color: var(--clr-primary);
    color: var(--clr-text-light);
    padding: 15px 30px;
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--fw-bold);
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.sl-btn:hover {
    background-color: var(--clr-background-dark);
    transform: translateY(-2px);
}

.sl-btn:disabled {
    background-color: var(--clr-secondary);
    cursor: not-allowed;
    transform: none;
    opacity: 0.7;
}

/* Dice Specific Styles */
.dc-cnt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.dc-wrap {
    display: flex;
    gap: 20px;
}

.dc-die {
    width: 100px;
    height: 100px;
    background-color: var(--clr-text-light);
    border-radius: var(--radius-md);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.5);
    border: 2px solid var(--clr-background-darker);
    background: radial-gradient(circle at 60% 60%, var(--clr-text-light) 0%, #E0E0D6 100%);
    transition: box-shadow 0.3s ease;
}

.dc-die.win-flash {
    box-shadow: 0 0 20px 5px var(--clr-success);
}

.dc-die.lose-flash {
    box-shadow: 0 0 20px 5px var(--clr-error);
}

.dc-face {
    display: contents;
}

.dc-dot {
    background-color: var(--clr-background-darker);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    margin: auto;
    display: block;
    opacity: 0; /* Hide by default */
    transition: opacity 0.1s ease;
}

.dc-dot.visible {
    opacity: 1;
}

/* Dot positions for each face */
.dc-face:nth-child(1) .dc-dot:nth-child(1) { /* Top Left */ }
.dc-face:nth-child(1) .dc-dot:nth-child(2) { /* Top Mid */ }
.dc-face:nth-child(1) .dc-dot:nth-child(3) { /* Top Right */ }
.dc-face:nth-child(1) .dc-dot:nth-child(4) { /* Mid Left */ }
.dc-face:nth-child(1) .dc-dot:nth-child(5) { /* Center */ }
.dc-face:nth-child(1) .dc-dot:nth-child(6) { /* Mid Right */ }
.dc-face:nth-child(1) .dc-dot:nth-child(7) { /* Bottom Left */ }
.dc-face:nth-child(1) .dc-dot:nth-child(8) { /* Bottom Mid */ }
.dc-face:nth-child(1) .dc-dot:nth-child(9) { /* Bottom Right */ }

.dc-ctrls {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.dc-bet-btn {
    background-color: var(--clr-background-dark);
    color: var(--clr-text-light);
    padding: 12px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.dc-bet-btn:hover {
    background-color: var(--clr-primary);
    transform: translateY(-2px);
}

.dc-bet-btn:disabled {
    background-color: var(--clr-secondary);
    cursor: not-allowed;
    transform: none;
    opacity: 0.7;
}

/* Coinflip Specific Styles */
.cf-cnt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.cf-choices {
    display: flex;
    gap: 15px;
}

.cf-choice-btn {
    background-color: var(--clr-background-dark);
    color: var(--clr-text-light);
    padding: 12px 25px;
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.cf-choice-btn:hover {
    background-color: var(--clr-primary);
    transform: translateY(-2px);
}

.cf-choice-btn.active-choice {
    background-color: var(--clr-accent);
    color: var(--clr-background-darker);
    box-shadow: 0 0 10px rgba(var(--clr-accent-rgb), 0.5);
}

.cf-choice-btn:disabled {
    background-color: var(--clr-secondary);
    cursor: not-allowed;
    transform: none;
    opacity: 0.7;
}

.cf-coin-wrap {
    width: 150px;
    height: 150px;
    perspective: 1000px;
    margin: 20px 0;
}

.cf-coin {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
    font-size: 1.5rem;
    color: var(--clr-background-darker);
    text-transform: uppercase;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), inset 0 0 15px rgba(255, 255, 255, 0.6);
    background: radial-gradient(circle at 50% 50%, var(--clr-accent) 0%, #B8860B 100%); /* Gold finish */
    border: 5px solid #8B4513; /* Primary border */
    color: #36221A; /* Dark text */
}

.cf-coin .coin-txt {
    z-index: 2;
}

.cf-coin .coin-ico {
    position: absolute;
    width: 70%;
    height: 70%;
    opacity: 0.7;
    fill: currentColor;
}

.cf-coin.tails {
    background: radial-gradient(circle at 50% 50%, #C0C0C0 0%, #A9A9A9 100%); /* Silver finish */
    border: 5px solid #808080;
    color: #333;
}

.cf-flip-btn {
    background-color: var(--clr-primary);
    color: var(--clr-text-light);
    padding: 15px 30px;
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--fw-bold);
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.cf-flip-btn:hover {
    background-color: var(--clr-background-dark);
    transform: translateY(-2px);
}

.cf-flip-btn:disabled {
    background-color: var(--clr-secondary);
    cursor: not-allowed;
    transform: none;
    opacity: 0.7;
}

/* Footer */
.w7z {
    background-color: var(--clr-background-darker);
    color: var(--clr-text-light);
    padding: 60px 20px 20px;
    text-align: center;
}

.v8x {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
    text-align: left;
}

.v8x .d1w {
    justify-content: flex-start;
    margin-bottom: 15px;
}

.v8x .g4f {
    color: var(--clr-text-light);
}

.v8x .d1w:hover .g4f {
    color: var(--clr-accent);
}

.e1f {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.p2q {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.q3r {
    color: var(--clr-accent);
    margin-bottom: 15px;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.s4t {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    display: block;
    padding: 2px 0;
}

.s4t:hover {
    color: var(--clr-accent);
}

.x0z {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    margin-top: 20px;
}

.y1a {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0;
}

/* Legal Pages */
.j0d {
    background-color: var(--clr-background-darker);
    color: var(--clr-text-light);
    padding: 100px 20px 60px;
    text-align: center;
    max-width: 100vw;
    margin: 0;
}

.r0p h1 {
    color: var(--clr-accent);
}

.b8c {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
}

.i1m {
    background-color: var(--clr-text-light);
    color: var(--clr-text-dark);
    padding: 60px 20px;
    border-bottom: 1px solid var(--clr-secondary);
    max-width: 1000px;
}

.i1m:last-of-type {
    border-bottom: none;
}

.k2n {
    color: var(--clr-primary);
    margin-bottom: 15px;
    font-size: clamp(1.3rem, 2.5vw, 2rem);
}

.i1m p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.2em;
}

/* Media Queries */
@media (max-width: 768px) {
    .e6s {
        display: none;
    }

    .h0p {
        display: block;
    }

    .r1b.is-open {
        max-height: 100vh; /* Adjust for actual content */
    }

    .h0p.is-active .f7j:nth-child(1) { transform: rotate(45deg) translate(8px, 8px); }
    .h0p.is-active .f7j:nth-child(2) { opacity: 0; }
    .h0p.is-active .f7j:nth-child(3) { transform: rotate(-45deg) translate(8px, -8px); }

    .x9y {
        padding: var(--hh) 20px 40px;
    }

    .o5f {
        flex-direction: column;
    }

    .m1q {
        width: 100%;
        text-align: center;
    }

    .c2j,
    .k3v,
    .d8r,
    .o2t {
        grid-template-columns: 1fr !important;
    }

    .h6m {
        padding: 25px;
    }

    .v3t {
        grid-template-columns: 1fr;
    }

    .n6r {
        padding: 40px;
    }

    .e4g {
        min-height: 320px;
        height: 320px;
    }

    .v8x {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .v8x .d1w {
        justify-content: center;
    }

    .q3r {
        margin-top: 30px;
    }

    .j0d {
        padding: var(--hh) 20px 40px;
    }

    .i1m {
        padding: 40px 20px;
    }

    .hnd-crds {
        justify-content: center;
    }

    .sl-reels-cnt {
        flex-direction: column;
    }

    .sl-reel-wrap {
        width: 100%;
        height: 100px;
    }

    .dc-wrap {
        flex-direction: column;
        align-items: center;
    }

    .dc-bet-btn {
        width: 100%;
    }

    .cf-choices {
        flex-direction: column;
        width: 100%;
    }

    .cf-choice-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    h2 {
        font-size: clamp(1.8rem, 7vw, 2.5rem);
    }

    h3 {
        font-size: clamp(1.3rem, 6vw, 2rem);
    }

    section {
        padding: 40px 16px;
    }

    .m1q {
        padding: 12px 20px;
        font-size: 0.9rem;
    }

    .n6r {
        padding: 30px 20px;
    }

    .p1x {
        font-size: 1rem;
        padding: 15px 20px;
    }

    .f7h {
        padding: 15px;
    }

    .g8i {
        flex-direction: column;
    }

    .h9j {
        width: 100%;
    }

    .j0d {
        padding: var(--hh) 16px 30px;
    }

    .i1m {
        padding: 30px 16px;
    }

    .bj-btn {
        width: 100%;
    }

    .sl-btn {
        width: 100%;
    }

    .cf-flip-btn {
        width: 100%;
    }
}