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

/* ==========================================================================
   sheet.css — casino skin for the 28 *-scoresheet pages.

   THE CONSTRAINT: these sheets must still print black-on-white on letter
   portrait. So this file styles ONLY the chrome that lives OUTSIDE the paper
   (page background, the action bars, the links). Everything inside
   .page-wrapper — the table, the numbers, the headings — is left exactly as
   it was, which is what actually goes on the paper.

   The look is "a white score pad lying on a black lacquer card table", which
   is why the paper stays white instead of going dark: a dark sheet would
   either print dark or make screen and print disagree.

   Also fixes a real gap: 8 of the 28 sheets shipped with NO @page rule at all
   (bidwhist, blackjack, golfcard, hearts, liarsdice, ohwell, pitch, tonk), so
   their print output had no enforced paper size or margin. The @page below
   applies to all 28; the 20 that already declare the identical rule are
   unaffected.
   ========================================================================== */

@page {
    size: letter portrait;
    margin: 0.25in;
}

:root {
    --lac-black:   #08080a;
    --lac-panel:   #101014;
    --gold:        #c9a227;
    --gold-lt:     #f0d98b;
    --gold-mid:    #d9bc5c;
    --hairline:    rgba(201, 162, 39, 0.20);
    --hairline-hi: rgba(201, 162, 39, 0.65);
    --ink-2:       #a8a396;
}

/* ---- the table the pad is lying on --------------------------------------- */
body {
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(201,162,39,0.06) 0%, transparent 58%),
        var(--lac-black);
    padding-bottom: 96px;             /* clear the fixed .actions bar */
}

/* ---- the paper ----------------------------------------------------------- */
.page-wrapper {
    min-height: 0;
    margin: 26px auto 34px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.6);
    box-shadow:
        0 0 0 1px rgba(201, 162, 39, 0.30),
        0 26px 60px rgba(0, 0, 0, 0.75),
        0 4px 14px rgba(0, 0, 0, 0.5);
}

/* Engraved wordmark, still pure black so it prints correctly. */
.title {
    font-family: 'Cinzel', Georgia, 'Times New Roman', serif !important;
    letter-spacing: 0.16em !important;
}

/* teal hover clashed with the gold; it is hidden in print either way */
.back-link:hover { color: #8a6d1f; }

/* ---- Print / Download / Guide row ---------------------------------------- */
.sc-bar a,
.sc-bar button {
    background: var(--lac-panel);
    border: 1px solid var(--hairline);
    color: var(--gold-mid);
    border-radius: 7px;
    letter-spacing: 0.04em;
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}

.sc-bar a:hover,
.sc-bar button:hover {
    border-color: var(--hairline-hi);
    color: var(--gold-lt);
    background: #17171e;
}

.sc-bar .sc-primary {
    background: linear-gradient(180deg, var(--gold-lt) 0%, var(--gold) 58%, #a8861d 100%);
    border-color: var(--gold-lt);
    color: #17140a;
    box-shadow: 0 2px 10px rgba(201, 162, 39, 0.22);
}

.sc-bar .sc-primary:hover {
    background: linear-gradient(180deg, #f7e6ae 0%, var(--gold-mid) 58%, var(--gold) 100%);
    color: #17140a;
}

.sc-bar-note { color: var(--ink-2); }

/* ---- fixed bottom action bar --------------------------------------------- */
.actions {
    background: rgba(8, 8, 10, 0.94);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--hairline-hi);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6);
    padding: 12px 10px;
}

.actions .btn {
    border-radius: 8px;
    letter-spacing: 0.06em;
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}

.actions .btn-primary {
    background: linear-gradient(180deg, var(--gold-lt) 0%, var(--gold) 58%, #a8861d 100%);
    border: 1px solid var(--gold-lt);
    color: #17140a;
}
.actions .btn-primary:hover {
    background: linear-gradient(180deg, #f7e6ae 0%, var(--gold-mid) 58%, var(--gold) 100%);
}

.actions .btn-secondary {
    background: var(--lac-panel);
    border: 1px solid var(--hairline);
    color: var(--gold-mid);
}
.actions .btn-secondary:hover {
    background: #17171e;
    border-color: var(--hairline-hi);
    color: var(--gold-lt);
}

/* "New" wipes the sheet — it stays visually distinct from the gold actions. */
.actions .btn-danger {
    background: var(--lac-panel);
    border: 1px solid rgba(196, 30, 58, 0.55);
    color: #e2707f;
}
.actions .btn-danger:hover {
    background: #1b1013;
    border-color: rgba(196, 30, 58, 0.9);
    color: #f08b98;
}

/* ---- injected site chrome ------------------------------------------------ */
#cdn-header { box-shadow: 0 1px 0 0 var(--gold), 0 2px 14px rgba(0, 0, 0, 0.55); }

/* --------------------------------------------------------------------------
   PRINT: strip every bit of the above back off, so the paper prints exactly
   as it did before this file existed.
   -------------------------------------------------------------------------- */
@media print {
    #cdn-header,
    #cdn-footer,
    .sc-bar,
    .sc-bar-note,
    .actions {
        display: none !important;
    }

    body {
        background: #fff !important;
        padding-bottom: 0 !important;
    }

    .page-wrapper {
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .title { color: #000 !important; }
}