/* Copycat plugin — spel/boeklezer + highscores */

.copycat-flash {
    /* Past binnen de content-kolom; begrensd op de schermhoogte zodat het
       hele spel in beeld past. */
    width: min(
        100%,
        calc(var(--cc-max, 1120) * 1px),
        calc((100svh - 10rem) * var(--cc-w, 806) / var(--cc-h, 722))
    );
    margin: .5rem auto;
}

/* Stage-achtergrond gepatcht naar de themakleur in de SWF zelf, dus geen
   witte randen meer; hier matchen we de kleur en kaderen subtiel. */
.copycat-flash-stage {
    width: 100%;
    aspect-ratio: var(--cc-w, 806) / var(--cc-h, 722);
    background: #141020;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .08),
        0 22px 55px -22px rgba(0, 0, 0, .8);
}

.copycat-flash-stage ruffle-player,
.copycat-flash-stage > * {
    width: 100% !important;
    height: 100% !important;
    background: #141020; /* donker vóór het spelen i.p.v. Ruffle's witte poster */
}

.copycat-scores {
    width: 100%;
    max-width: 420px;
    border-collapse: collapse;
    margin: 1rem 0;
    font-variant-numeric: tabular-nums;
}

.copycat-scores th,
.copycat-scores td {
    padding: .5rem .75rem;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.copycat-scores th:first-child,
.copycat-scores td:first-child {
    width: 2.5rem;
    color: #888;
}

.copycat-scores th:last-child,
.copycat-scores td:last-child {
    text-align: right;
}

.copycat-scores thead th {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #666;
}