:root {
    --ink: #0d0d0c;
    --charcoal: #171716;
    --paper: #eee9df;
    --cream: #f7f2e8;
    --gold: #b99050;
    --gold-light: #d0ae72;
    --muted: #9d998f;
    --line: rgba(185, 144, 80, .28);
    --serif: "Libre Caslon Display", Georgia, serif;
    --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-weight: 300;
    line-height: 1.55;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 8%, rgba(185, 144, 80, .14), transparent 34%);
    z-index: 1;
}

.game-shell {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: clamp(22px, 5vw, 70px);
    background:
        linear-gradient(180deg, rgba(4, 4, 3, .74), rgba(4, 4, 3, .46) 45%, rgba(4, 4, 3, .9)),
        linear-gradient(90deg, rgba(0, 0, 0, .42), transparent 60%),
        url('../../../../images/bg_feijoada.png') center 55% / cover no-repeat;
}

.game-card,
.wheel-card {
    position: relative;
    z-index: 2;
    width: min(760px, 100%);
    padding: clamp(34px, 6vw, 70px);
    border: 1px solid var(--line);
    background: rgba(13, 13, 12, .88);
    backdrop-filter: blur(16px);
    box-shadow: 0 34px 90px rgba(0, 0, 0, .48);
    text-align: center;
}

.game-card::before,
.wheel-card::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(185, 144, 80, .12);
    pointer-events: none;
}

.game-card.small { width: min(560px, 100%); }

img {
    display: block;
    width: 170px;
    max-width: 100%;
    margin: 0 auto 28px;
}

.eyebrow {
    color: var(--gold-light);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
}

h1 {
    margin: 18px 0 28px;
    color: var(--paper);
    font: 400 clamp(3rem, 8vw, 5.8rem)/.98 var(--serif);
    letter-spacing: -.035em;
}

p { color: #d4d0c8; }

.game-form {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 15px;
    margin: 30px auto 0;
    text-align: left;
    width: min(520px, 100%);
}

.game-form input:not([type=checkbox]),
.game-form textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(185, 144, 80, .44);
    border-radius: 0;
    background: rgba(255, 255, 255, .035);
    color: var(--paper);
    padding: 15px 2px 14px;
    outline: 0;
}

.game-form input:focus,
.game-form textarea:focus {
    border-color: var(--gold-light);
}

.game-form input::placeholder { color: #a8a29a; }

.check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #bbb6ae;
    font-size: .88rem;
    line-height: 1.45;
}

.game-form button,
.button,
.copy,
#spinButton {
    min-height: 50px;
    border: 1px solid transparent;
    border-radius: 0;
    background: var(--gold);
    color: var(--ink);
    padding: 14px 28px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .25s ease;
    box-shadow: none;
}

.game-form button:hover,
.button:hover,
.copy:hover,
#spinButton:hover {
    background: var(--gold-light);
    transform: translateY(-2px);
}

.game-form .ghost {
    background: transparent;
    color: var(--gold-light);
    border: 1px solid var(--line);
}

.game-error,
.game-ok,
.demo-code {
    position: relative;
    z-index: 1;
    padding: 13px 16px;
    margin: 18px auto;
    width: min(520px, 100%);
    border: 1px solid rgba(185, 144, 80, .28);
    background: rgba(13, 13, 12, .78);
    color: #e8d4b7;
}

.game-ok,
.demo-code {
    color: var(--gold-light);
}

.back {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-top: 24px;
    color: var(--gold-light);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.wheel-page {
    place-items: start center;
    padding-top: clamp(18px, 4vw, 42px);
}

.wheel-card {
    width: min(980px, 100%);
    padding: clamp(24px, 4.5vw, 54px);
    background: rgba(13, 13, 12, .84);
}

.wheel-card > img {
    width: clamp(165px, 13vw, 205px);
    margin-bottom: 28px;
}

.wheel-card h1 {
    margin-bottom: 0;
    font-size: clamp(2.5rem, 5vw, 4.4rem);
}

.wheel-wrap {
    position: relative;
    width: min(620px, 82vw);
    margin: clamp(44px, 6vw, 72px) auto 22px;
}

.wheel-wrap::before {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(185, 144, 80, .28), rgba(185, 144, 80, .08) 42%, transparent 72%);
    filter: blur(22px);
}

.wheel-wrap canvas {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    filter:
        drop-shadow(0 0 10px rgba(185, 144, 80, .38))
        drop-shadow(0 22px 48px rgba(0, 0, 0, .72));
}

.pointer {
    position: absolute;
    z-index: 3;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;
    border-top: 42px solid var(--cream);
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
}

.spin-actions {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 12px;
    margin-top: 4px;
}

#spinButton {
    min-width: 230px;
    font-size: .78rem;
}

#spinButton:disabled {
    opacity: .65;
    cursor: not-allowed;
}

#spinStatus {
    min-height: 24px;
    margin: 0;
    color: #cfc7ba;
    font-size: .86rem;
}

.code {
    display: inline-block;
    margin: 18px 0;
    padding: 16px 28px;
    border: 1px dashed var(--gold-light);
    color: var(--gold-light);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.result strong { color: var(--gold-light); }
small { color: #bcb3a4; }
.social-list { text-align: left; white-space: pre-wrap; }

.result-list {
    display: grid;
    gap: 12px;
    margin: 24px 0;
    text-align: left;
}

.result-list article {
    border: 1px solid var(--line);
    padding: 16px;
    background: rgba(255, 255, 255, .035);
}

.result-list strong,
.result-list span,
.result-list small { display: block; }
.result-list strong { color: var(--gold-light); font-size: 1.1rem; }
.result-list span { color: #ddd5ca; margin-top: 4px; }
.result-list small { color: #a8a098; margin-top: 6px; }

@media (max-width: 620px) {
    .game-shell { padding: 14px; }
    .game-card,
    .wheel-card { padding: 26px 22px; }
    .game-card::before,
    .wheel-card::before { inset: 10px; }
    .wheel-card > img { width: 150px; margin-bottom: 20px; }
    .wheel-wrap { width: min(580px, 92vw); margin-top: 42px; }
    #spinButton {
        min-width: 190px;
        font-size: .72rem;
    }
}


.customer-shell {
    align-items: start;
    padding-block: clamp(28px, 5vw, 76px);
}

.customer-dashboard {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    border: 1px solid var(--line);
    background: rgba(13, 13, 12, .88);
    backdrop-filter: blur(16px);
    box-shadow: 0 34px 90px rgba(0, 0, 0, .48);
    padding: clamp(26px, 5vw, 62px);
}

.customer-dashboard::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(185, 144, 80, .12);
    pointer-events: none;
}

.customer-hero,
.member-stats,
.dashboard-grid,
.games-panel,
.customer-actions {
    position: relative;
    z-index: 1;
}

.customer-hero {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 34px;
}

.customer-hero img {
    width: clamp(160px, 13vw, 205px);
    margin-bottom: 26px;
}

.customer-hero h1 {
    margin-bottom: 20px;
}

.member-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 34px 0;
}

.member-stats article,
.privilege-card,
.games-panel {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .035);
}

.member-stats article {
    padding: 22px;
    text-align: center;
}

.member-stats span,
.result-code span {
    display: block;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.member-stats strong {
    display: block;
    margin: 6px 0;
    color: var(--gold-light);
    font: 400 2.8rem/1 var(--serif);
}

.member-stats small { color: #aaa49b; }

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 16px;
    margin-bottom: 16px;
}

.privilege-card {
    padding: clamp(22px, 3vw, 32px);
    text-align: left;
}

.privilege-card.wide {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 330px;
    background:
        linear-gradient(180deg, rgba(13, 13, 12, .28), rgba(13, 13, 12, .88)),
        url('../../../../images/brazilianchurrasco_picanha.jpg') center / cover;
}

.privilege-card h2,
.games-panel h2 {
    margin: 14px 0 18px;
    color: var(--paper);
    font: 400 clamp(2rem, 4vw, 3.6rem)/1 var(--serif);
    letter-spacing: -.025em;
}

.promo-list {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.promo-list div {
    padding-top: 15px;
    border-top: 1px solid rgba(185, 144, 80, .18);
}

.promo-list strong,
.promo-list span {
    display: block;
}

.promo-list strong {
    color: var(--gold-light);
    font: 400 1.2rem var(--serif);
}

.promo-list span {
    margin-top: 4px;
    color: #bdb6ac;
    font-size: .9rem;
}

.popular-list {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: popular;
}

.popular-list li {
    counter-increment: popular;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 0;
    border-top: 1px solid rgba(185, 144, 80, .18);
    color: #e1d9ce;
}

.popular-list li::before {
    content: "0" counter(popular);
    color: var(--gold-light);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.games-panel {
    padding: clamp(22px, 3vw, 34px);
}

.panel-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 22px;
}

.games-list {
    display: grid;
    gap: 12px;
}

.game-result {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border: 1px solid rgba(185, 144, 80, .2);
    background: rgba(13, 13, 12, .38);
    text-align: left;
}

.game-result.won {
    border-color: rgba(208, 174, 114, .48);
    background: linear-gradient(90deg, rgba(185, 144, 80, .16), rgba(255,255,255,.03));
}

.game-result strong {
    display: block;
    margin: 9px 0 4px;
    color: var(--paper);
    font: 400 1.5rem/1.1 var(--serif);
}

.status-pill {
    display: inline-flex;
    padding: 5px 9px;
    border: 1px solid rgba(185, 144, 80, .38);
    color: var(--gold-light);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.game-result.lost .status-pill {
    color: #aaa49b;
}

.result-code {
    min-width: 170px;
    text-align: right;
}

.result-code b {
    display: block;
    margin-top: 6px;
    color: var(--gold-light);
    letter-spacing: .08em;
}

.customer-actions {
    display: flex;
    justify-content: center;
}

@media (max-width: 850px) {
    .member-stats,
    .dashboard-grid,
    .game-result {
        grid-template-columns: 1fr;
    }

    .panel-title {
        display: grid;
        align-items: start;
    }

    .result-code {
        min-width: 0;
        text-align: left;
    }
}


.customer-promo-item {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 14px;
    align-items: start;
    padding-top: 15px;
    border-top: 1px solid rgba(185, 144, 80, .18);
}

.customer-promo-item img {
    width: 96px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    margin: 0;
    border: 1px solid rgba(185, 144, 80, .22);
}

@media (max-width: 620px) {
    .customer-promo-item { grid-template-columns: 78px 1fr; }
    .customer-promo-item img { width: 78px; }
}