@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap");

/* ==========================================================================
   casino.css — "black lacquer + gold" skin for score.digitalprank.com
   Loaded AFTER main.css. Overrides only; main.css keeps all layout/behaviour.

   RULES OBSERVED (do not remove — these are past regressions):
   1. NEVER set a global `body { background: <light> }`. The page is dark and
      the hero title is light; a light body background makes it invisible.
   2. NEVER inject a second header. The DigitalPrank header arrives via
      #cdn-header. Nothing here may style or duplicate it.
   3. NEVER write a bare `a:hover { color: ... }`. The injected header lives
      inside this document and a global link-hover turns its white-on-white.
      Every rule below is scoped to .main-content or a explicit class.
   ========================================================================== */

:root {
    /* Surfaces */
    --lac-black:     #08080a;   /* page base                */
    --lac-deep:      #0b0b0f;   /* gradient partner         */
    --lac-panel:     #101014;   /* tile face                */
    --lac-panel-hi:  #17171e;   /* tile face, hover         */

    /* Gold */
    --gold:          #c9a227;
    --gold-lt:       #f0d98b;
    --gold-mid:      #d9bc5c;
    --gold-dk:       #7d6318;
    --hairline:      rgba(201, 162, 39, 0.20);
    --hairline-hi:   rgba(201, 162, 39, 0.65);

    /* Ink */
    --ink:           #f5f3ed;
    --ink-2:         #a8a396;
    --ink-3:         #6f6b60;

    --display: 'Cinzel', 'Didot', 'Bodoni MT', Georgia, 'Times New Roman', serif;

    /* ----------------------------------------------------------------------
       Retune main.css's own tokens.

       guides.css, the game screens and every badge/button already draw from
       --bg-card / --accent-purple / --felt-color etc. Repointing those here
       moves the WHOLE site to the lacquer palette in one place, instead of
       hand-restyling 27 guide pages and 28 game screens component by
       component — and it means anything added later inherits it too.

       Safe against the header: the "Protect the injected DigitalPrank header"
       block in main.css pins .dp-header/.dp-footer colours with literal rgb()
       values, so none of these variables reach the injected chrome.
       ---------------------------------------------------------------------- */
    --felt-color:          #0b0b0f;
    --felt-dark:           #08080a;
    --felt-light:          #16161c;

    --bg-dark:             #08080a;
    --bg-card:             #101014;
    --bg-card-hover:       #17171e;
    --bg-input:            #0d0d11;

    --accent-purple:       #c9a227;   /* now gold; name kept so main.css works */
    --accent-purple-light: #e3c469;

    --border-color:        rgba(201, 162, 39, 0.20);

    --text-primary:        #f5f3ed;
    --text-secondary:      #a8a396;
    --text-muted:          #6f6b60;

    --suit-spade:          #e8e4d8;
    --suit-club:           #e8e4d8;
}

/* --accent-purple is now gold, so anything that filled with it and wrote in
   white has to flip to dark ink or it drops to unreadable contrast. */
.main-content .btn-primary,
.main-content .btn-accent,
.main-content .coming-soon-badge {
    color: #17140a;
}

/* --------------------------------------------------------------------------
   Page base
   -------------------------------------------------------------------------- */
body {
    background: var(--lac-black);
    color: var(--ink);
}

/* Lacquer depth: a soft warm pool behind the content, then a vignette.
   Sits at z-index 0; .container is z-index 1 so content stays above. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(120% 80% at 50% 0%,   rgba(201,162,39,0.07) 0%, transparent 60%),
        radial-gradient(100% 70% at 50% 100%, rgba(201,162,39,0.04) 0%, transparent 65%),
        radial-gradient(140% 100% at 50% 50%, transparent 45%, rgba(0,0,0,0.75) 100%);
}

/* Existing noise overlay: soften it against the darker base. */
body::before { opacity: 0.022; }

/* Corner suits: were near-invisible grey. Make them gold leaf. */
.corner-suit {
    color: var(--gold);
    opacity: 0.045;
}

/* A single gold hairline sealing the white CDN header against the black page. */
#cdn-header {
    position: relative;
    z-index: 3;
    box-shadow: 0 1px 0 0 var(--gold), 0 2px 14px rgba(0,0,0,0.55);
}

.main-content { padding-top: 32px; }

/* --------------------------------------------------------------------------
   Hero — engraved wordmark between two rules
   -------------------------------------------------------------------------- */
.main-content .hero {
    padding: 46px 0 40px;
}

.main-content .hero-title {
    font-family: var(--display);
    font-size: clamp(2rem, 5.6vw, 3.5rem);
    font-weight: 700;
    letter-spacing: 0.26em;
    text-indent: 0.26em;           /* optical centring for the tracking */
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0 0 6px;

    /* Cinzel's strokes are fine at this size, so the gradient must not run
       dark or the wordmark reads washed out. Keep the whole ramp in the
       light half of the gold. */
    background: linear-gradient(180deg,
                #fdf3d4 0%, #f3dd9a 34%,
                #e3c469 62%, #c9a227 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #f0d98b;                /* fallback where background-clip fails */

    /* background-clip:text kills text-shadow, so the lift comes from a soft
       gold bloom painted behind the whole hero block instead. */
    filter: drop-shadow(0 0 22px rgba(201, 162, 39, 0.30));
}

/* The four inline suit emoji next to the title were the ugliest thing on the
   page. Replaced by a rule-and-diamond flourish drawn in CSS. */
.main-content .hero-suits { display: none; }

.main-content .hero::before,
.main-content .hero::after {
    content: '';
    display: block;
    width: min(340px, 62%);
    margin: 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.75;
}
.main-content .hero::before { margin-bottom: 22px; }
.main-content .hero::after  { margin-top: 20px; }

.hero-rule {
    display: block;
    text-align: center;
    margin-top: 14px;
    font-size: 0.66rem;
    letter-spacing: 0.44em;
    text-indent: 0.44em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */
.main-content h2 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.05rem, 2.4vw, 1.4rem);
    letter-spacing: 0.26em;
    text-indent: 0.26em;
    text-transform: uppercase;
    color: var(--gold-mid);
    margin-bottom: 26px;
}

/* --------------------------------------------------------------------------
   Game tiles
   -------------------------------------------------------------------------- */
.game-grid { gap: 14px; }

@media (min-width: 1280px) {
    .game-grid { grid-template-columns: repeat(5, 1fr); }
}

.game-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.028) 0%, transparent 38%),
        var(--lac-panel);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 20px 14px 16px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.035) inset,
        0 10px 26px rgba(0,0,0,0.55);
    transition: transform 220ms ease, border-color 220ms ease,
                box-shadow 220ms ease, background-color 220ms ease;
}

.game-card:hover,
.game-card:focus-visible {
    transform: translateY(-5px);
    border-color: var(--hairline-hi);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 40%),
        var(--lac-panel-hi);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 0 0 1px rgba(201,162,39,0.16),
        0 16px 38px rgba(0,0,0,0.68),
        0 0 34px rgba(201,162,39,0.13);
}

/* The medallion. Every icon is the same 84px gold-ringed disc, so 28
   separately generated artworks still read as one set. */
.game-card-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;                     /* fallback if art is missing */
    background:
        radial-gradient(circle at 50% 30%, #1b1b22 0%, #0a0a0d 72%);
    border: 1px solid rgba(201,162,39,0.42);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.85) inset,
        0 0 16px rgba(201,162,39,0.10) inset,
        0 4px 12px rgba(0,0,0,0.6);
    overflow: hidden;
    filter: none;
    transition: border-color 220ms ease, box-shadow 220ms ease;
}

.game-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.game-card:hover .game-card-icon {
    border-color: rgba(201,162,39,0.85);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.85) inset,
        0 0 22px rgba(201,162,39,0.22) inset,
        0 4px 16px rgba(0,0,0,0.7),
        0 0 20px rgba(201,162,39,0.20);
}

.game-card-title {
    font-family: var(--display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 5px;
}

.game-card-players {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    margin-bottom: 14px;
}

/* PLAY: a gold hairline and a lettered link, not a purple pill. */
.game-card .btn,
.game-card .btn-accent {
    display: block;
    width: 100%;
    min-height: 0;
    padding: 11px 0 0;
    background: none !important;
    border: none;
    border-top: 1px solid var(--hairline);
    border-radius: 0;
    box-shadow: none;
    color: var(--gold-mid);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    text-transform: uppercase;
    transition: color 200ms ease, border-color 200ms ease;
}

.game-card .btn::after {
    content: ' \2192';
    letter-spacing: 0;
}

.game-card:hover .btn,
.game-card:hover .btn-accent {
    color: var(--gold-lt);
    border-top-color: var(--hairline-hi);
    transform: none;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Guides promo
   -------------------------------------------------------------------------- */
.guides-promo {
    margin-top: 46px;
    padding: 30px 24px 28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.022) 0%, transparent 40%),
        var(--lac-panel);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.guides-promo .text-secondary {
    color: var(--ink-2);
    font-size: 0.88rem;
}

.guides-promo-card {
    background: rgba(0,0,0,0.42);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 16px 12px;
    transition: transform 200ms ease, border-color 200ms ease,
                box-shadow 200ms ease;
}

.guides-promo-card:hover {
    transform: translateY(-3px);
    border-color: var(--hairline-hi);
    box-shadow: 0 10px 24px rgba(0,0,0,0.55),
                0 0 20px rgba(201,162,39,0.10);
}

.guides-promo-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: radial-gradient(circle at 50% 30%, #1b1b22 0%, #0a0a0d 72%);
    border: 1px solid rgba(201,162,39,0.38);
    overflow: hidden;
}

.guides-promo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.guides-promo-name {
    font-size: 0.74rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.guides-promo-card:hover .guides-promo-name { color: var(--gold-lt); }

/* "All Guides" is the one gold-filled element on the page — the single
   strongest call to action, so nothing else competes with it. */
.guides-promo-card.guides-promo-all {
    background: linear-gradient(180deg, var(--gold-lt) 0%, var(--gold) 55%, #a8861d 100%);
    border-color: var(--gold-lt);
}
.guides-promo-card.guides-promo-all:hover {
    background: linear-gradient(180deg, #f7e6ae 0%, var(--gold-mid) 55%, var(--gold) 100%);
    border-color: #f7e6ae;
}
.guides-promo-card.guides-promo-all .guides-promo-name { color: #17140a; font-weight: 700; }

/* The medallion art is gold, so on the gold tile it needs a dark disc behind
   it or it disappears into the background. */
.guides-promo-card.guides-promo-all .guides-promo-icon {
    background: radial-gradient(circle at 50% 30%, #1f1f27 0%, #0a0a0d 72%);
    border-color: rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
   Injected site footer
   --------------------------------------------------------------------------
   The shared CDN footer arrives mid-grey (#262626) under a purple/blue
   gradient bar — both left over from the old indigo theme and both loud
   against the lacquer. Restyled here only, so digitalprank.com is untouched.
   -------------------------------------------------------------------------- */
#cdn-footer .dp-footer {
    background: #0b0b0f;
    border-top: 1px solid var(--hairline-hi);
}

#cdn-footer .dp-footer::before {
    background: none !important;
    height: 0 !important;
}

/* --------------------------------------------------------------------------
   Game screens
   --------------------------------------------------------------------------
   !important is deliberate in both rules below. Each of the 28 games ships its
   own <game>.css that re-colours these with ID-scoped selectors — e.g.
   spades.css has `#team1-card .team-number { background: linear-gradient(...
   #6366f1, #4f46e5) }`. Overriding 28 files individually would be 28 places to
   drift; beating the ID specificity once here is the honest trade.
   -------------------------------------------------------------------------- */
.team-number {
    background: linear-gradient(180deg, var(--gold-lt) 0%, var(--gold) 58%, #a8861d 100%)
                !important;
    color: #17140a !important;
    box-shadow: 0 2px 8px rgba(201, 162, 39, 0.22);
}

/* A filled-in team name was drawing a bright green "valid" border
   (--success, #28a745) across the whole form. Gold hairline instead. */
.form-input:valid:not(:placeholder-shown) {
    border-color: var(--hairline-hi) !important;
}

.form-input:focus {
    border-color: var(--gold-mid);
    outline-color: var(--gold-mid);
}

/* --------------------------------------------------------------------------
   Guides
   -------------------------------------------------------------------------- */
/* The big suit glyph atop each guide inherited --suit-spade and rendered as a
   white blob on the lacquer. Gold leaf, with the same bloom as the wordmark. */
.guide-header-icon {
    color: var(--gold-mid);
    filter: drop-shadow(0 0 18px rgba(201, 162, 39, 0.28));
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .game-card, .game-card-icon, .guides-promo-card, .game-card .btn {
        transition: none;
    }
    .game-card:hover, .guides-promo-card:hover { transform: none; }
}