/* Commons Game – custom styles (supplements Pico CSS)
 *
 * Based on CPR game research by Smith (2023) and Paterson (2023),
 * University of North Texas.
 */

/* Attribution footer */
body > footer {
    text-align: center;
    opacity: 0.7;
}

/* ---------------------------------------------------------------
 * Responsive table overflow handling
 *
 * Markdown-rendered tables (instructions, rules overview) and
 * manually authored tables (building guide) can be wider than the
 * viewport on small screens.  Wrapping them in a scrollable
 * container prevents the entire page from scrolling horizontally.
 * --------------------------------------------------------------- */
.instruction-content table,
article table,
section table,
figure table {
    width: 100%;
}

.instruction-content,
article,
section {
    overflow-x: auto;
}

/* ---------------------------------------------------------------
 * Mobile-friendly resource rows (play session)
 *
 * On very narrow screens the crash-countdown text ("⚠ CRASHED —
 * 3 turns to recovery") can push the row beyond the container.
 * Allow wrapping so the crash info drops to its own line.
 * --------------------------------------------------------------- */
@media (max-width: 480px) {
    .resource-row {
        flex-wrap: wrap;
    }
    .crash-countdown {
        flex-basis: 100%;
        margin-top: 0.2rem;
    }
}

/* ---------------------------------------------------------------
 * Print styles
 * --------------------------------------------------------------- */
@media print {
    header nav,
    footer a,
    [role="button"],
    .no-print {
        display: none !important;
    }

    body {
        font-size: 11pt;
        color: #000;
        background: #fff;
    }

    main.container {
        max-width: 100%;
        padding: 0;
    }

    a {
        color: #000;
        text-decoration: none;
    }

    a[href]::after {
        content: none;
    }
}