/* Blame Game print-and-play sheets.
   On screen this is a preview; the @media print block is what actually matters.
   Cards are 2.5in x 3.5in (standard poker), 9 to a letter page. */

.pnp-intro {
    max-width: 760px;
    margin: 0 auto 30px;
}

.pnp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin: 18px 0 8px;
}

.pnp-print-btn {
    padding: 14px 26px;
    font-family: 'Nunito', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    background: #3d9a96;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pnp-print-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(61, 154, 150, 0.4);
}

.pnp-note {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
}

.pnp-play-line {
    margin-bottom: 4px;
    color: #d8d8d8;
}

/* modern.css doesn't style bare anchors, so without this they fall back to the
   browser's default blue, which is unreadable on the dark background. */
.pnp-intro a {
    color: #4ecdc4;
}

.pnp-intro a:hover {
    color: #7fded7;
}

/* Rules sheet -------------------------------------------------------------
   Styled as paper at all times, because on screen it is a scaled-down preview
   of the printed page rather than a block of site copy. The generous padding is
   the page's own margin, so the sheet looks right even if someone prints with
   margins set to None. */
.pnp-rules {
    width: 100%;
    height: 100%;
    padding: 0.6in 0.7in;
    background: #ffffff;
    color: #1a1a1a;
    font-size: 10.5pt;
    line-height: 1.4;
}

.pnp-rules h2 {
    font-size: 20pt;
    margin-bottom: 0;
    color: #111111;
}

.pnp-rules .pnp-rules-sub {
    font-size: 11pt;
    color: #444444;
    margin-bottom: 12pt;
}

.pnp-rules h3 {
    font-size: 12pt;
    margin: 11pt 0 2pt;
    color: #DE000D;
}

.pnp-rules p {
    margin-bottom: 4pt;
    color: #1a1a1a;
}

.pnp-rules ol,
.pnp-rules ul {
    margin: 0 0 4pt 18pt;
    color: #1a1a1a;
}

.pnp-rules li {
    margin-bottom: 3pt;
}

.pnp-rules-foot {
    margin-top: 12pt;
    color: #666666;
    font-size: 9pt;
}

/* Sheets ------------------------------------------------------------------ */
.pnp-page {
    margin: 0 auto 26px;
    padding: 0.25in;
    background: #ffffff;
    border-radius: 6px;
}

.pnp-grid {
    display: grid;
    grid-template-columns: repeat(3, 2.5in);
    grid-auto-rows: 3.5in;
    justify-content: center;
}

/* Border-box keeps the frame inside the 2.5in x 3.5in footprint, so the cards
   still cut to standard poker size. The colored edge doubles as the cut guide
   and as the only way to tell the two piles apart once they're cut out, since
   the art alone doesn't say which type a card is. Reds/blues match the digital
   game and the printed card backs. */
.pnp-card {
    position: relative;
    box-sizing: border-box;
    width: 2.5in;
    height: 3.5in;
    overflow: hidden;
    /* Thick enough to read the pile colour at a glance and to give some slack
       when cutting. Border-box means this eats into the art, not the footprint. */
    border: 5px solid #b9b9b9;
}

.pnp-card-problem {
    border-color: #DE000D;
}

.pnp-card-blame {
    border-color: #0057A8;
}

.pnp-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Screen preview -----------------------------------------------------------
   Pages become thumbnails laid out in a row so the whole printout is visible
   without scrolling. Everything here is screen-only, so the printed sheet keeps
   its exact inch sizing regardless. */
@media screen {
    .pnp-sheets {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        max-width: 900px;
        margin: 0 auto;
    }

    .pnp-page {
        width: 232px;
        margin: 0;
        padding: 6px;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    }

    /* Cards go proportional instead of fixed inches so they scale with the
       thumbnail, and the border thins out so it doesn't swamp them. */
    .pnp-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: auto;
        justify-content: stretch;
    }

    .pnp-card {
        width: 100%;
        height: auto;
        aspect-ratio: 5 / 7;
        border-width: 2px;
    }

    /* The rules are laid out for a full page, so the thumbnail renders them at
       real size and scales the whole block down. transform-origin is top left
       and the parent clips, which is what keeps it from drifting off-centre the
       way the old whole-page scaling did. */
    .pnp-page-rules {
        aspect-ratio: 8.5 / 11;
        padding: 0;
        overflow: hidden;
        position: relative;
    }

    .pnp-page-rules .pnp-rules {
        position: absolute;
        top: 0;
        left: 0;
        width: 8.5in;
        height: 11in;
        transform: scale(0.2843); /* 232px / 816px */
        transform-origin: top left;
    }
}

@media screen and (max-width: 560px) {
    .pnp-sheets {
        gap: 12px;
    }

    .pnp-page {
        width: 158px;
    }

    .pnp-page-rules .pnp-rules {
        transform: scale(0.1936); /* 158px / 816px */
    }
}

/* Print ------------------------------------------------------------------- */
@media print {
    @page {
        size: letter portrait;
        margin: 0.25in;
    }

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    /* display:none, not visibility:hidden. Hidden elements keep their layout
       box, so the nav, hero and footer were still reserving full-page space
       and padding the printout with blank sheets. */
    body > *:not(.container) {
        display: none !important;
    }

    .container > *:not(.pnp-sheets) {
        display: none !important;
    }

    .container {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* The rules page is a normal page in the flow now; it just needs its screen
       thumbnail scaling undone and its own margin kept. */
    .pnp-page-rules {
        aspect-ratio: auto !important;
        overflow: visible !important;
        position: static !important;
    }

    .pnp-page-rules .pnp-rules {
        position: static !important;
        width: auto !important;
        height: auto !important;
        transform: none !important;
        background: #ffffff !important;
        color: #000000 !important;
        /* Page margin for the rules sheet specifically. The @page margin is only
           0.25in because the card grid needs every inch; the rules have room to
           spare, so they get a proper margin and look right at any setting. */
        padding: 0.45in 0.5in !important;
    }

    .pnp-rules h2,
    .pnp-rules h3,
    .pnp-rules p,
    .pnp-rules li,
    .pnp-rules .pnp-rules-sub,
    .pnp-rules-foot {
        color: #000000 !important;
    }

    /* Sized to land the whole rules sheet on one page. */
    .pnp-rules h2 {
        font-size: 17pt !important;
        margin-bottom: 0 !important;
    }

    .pnp-rules .pnp-rules-sub {
        font-size: 10pt !important;
        margin-bottom: 9pt !important;
    }

    .pnp-rules h3 {
        font-size: 11pt !important;
        margin: 9pt 0 2pt !important;
    }

    .pnp-rules p,
    .pnp-rules li {
        font-size: 9.5pt !important;
        line-height: 1.35 !important;
        margin-bottom: 3pt !important;
    }

    .pnp-rules ol,
    .pnp-rules ul {
        margin: 0 0 3pt 16pt !important;
    }

    .pnp-rules-foot {
        margin-top: 10pt !important;
        font-size: 8.5pt !important;
        color: #444444 !important;
    }

    /* Undo the screen thumbnail layout: pages stack one per sheet again. */
    .pnp-sheets {
        display: block !important;
        max-width: none !important;
        overflow: visible !important;
        gap: 0 !important;
    }

    .pnp-page {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        background: #fff !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        page-break-after: always;
        break-after: page;
    }

    .pnp-grid {
        grid-template-columns: repeat(3, 2.5in) !important;
        grid-auto-rows: 3.5in !important;
        justify-content: center !important;
    }

    .pnp-card {
        width: 2.5in !important;
        height: 3.5in !important;
        aspect-ratio: auto !important;
        border-width: 5px !important;
    }

    .pnp-page:last-child {
        page-break-after: auto;
        break-after: auto;
    }

    .pnp-card {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .pnp-card-img {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}