:root {
    --vilt: #1f6b43;
    --vilt-donker: #164f31;
    --goud: #f4c542;
    --tekst: #f5f5f0;
    --rood: #c62828;
    --zwart: #1b1b1b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--tekst);
    background: radial-gradient(circle at top, var(--vilt), var(--vilt-donker));
}

a { color: var(--goud); }

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(0, 0, 0, .25);
}

header .logo { font-size: 1.3rem; font-weight: 700; text-decoration: none; }
header nav a { margin-left: 1.5rem; text-decoration: none; }
header nav a:hover { text-decoration: underline; }

main { flex: 1; width: 100%; max-width: 1000px; margin: 0 auto; padding: 2rem 1rem; }

footer { text-align: center; padding: 1rem; font-size: .85rem; opacity: .7; }

.layout { display: grid; grid-template-columns: 1fr 260px; gap: 2rem; }
@media (max-width: 760px) { .layout { grid-template-columns: 1fr; } }

.tafel, .top, .paneel {
    background: rgba(0, 0, 0, .2);
    border-radius: 16px;
    padding: 2rem;
}

.tafel { text-align: center; }
.uitleg { max-width: 34rem; margin: 0 auto 2rem; line-height: 1.5; }
.reeks { font-size: 1.2rem; }
.reeks strong { color: var(--goud); font-size: 1.6rem; }

.kaarten {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 2rem;
    margin: 1.5rem 0 2rem;
}

.kaart {
    position: relative;
    width: 140px;
    height: 200px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
    animation: trek .35s ease-out;
}

.kaart.rood { color: var(--rood); }
.kaart.zwart { color: var(--zwart); }

.kaart .hoek { position: absolute; font-weight: 700; line-height: 1; font-size: 1.2rem; text-align: center; }
.kaart .boven { top: 10px; left: 12px; }
.kaart .onder { bottom: 10px; right: 12px; transform: rotate(180deg); }
.kaart .midden { position: absolute; inset: 0; display: grid; place-items: center; font-size: 4rem; }

.vorige { display: flex; flex-direction: column; align-items: center; gap: .4rem; opacity: .6; }
.vorige .kaart { width: 90px; height: 128px; animation: none; }
.vorige .kaart .midden { font-size: 2.5rem; }
.vorige .kaart .hoek { font-size: .9rem; }

@keyframes trek {
    from { transform: translateY(-30px) rotate(-6deg); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.knop {
    display: inline-block;
    border: 0;
    border-radius: 999px;
    padding: .7rem 1.6rem;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    background: var(--goud);
    color: var(--zwart);
    text-decoration: none;
    transition: transform .1s;
}
.knop:hover { transform: scale(1.05); }
.knop.groot { font-size: 1.3rem; padding: .9rem 2.2rem; margin-top: 1rem; }

.keuzes { display: flex; justify-content: center; gap: 1rem; }

.opslaan { margin: 1rem 0; }
.opslaan label { display: block; margin-bottom: .5rem; }
.opslaan input {
    padding: .65rem 1rem;
    border-radius: 999px;
    border: 0;
    font-size: 1rem;
    margin-right: .5rem;
}

.melding { padding: .8rem 1rem; border-radius: 10px; font-weight: 600; }
.melding.goed { background: rgba(76, 175, 80, .35); }
.melding.gelijk { background: rgba(244, 197, 66, .3); }
.melding.fout { background: rgba(198, 40, 40, .4); }

.top ol { padding-left: 1.2rem; }
.top li { display: flex; justify-content: space-between; padding: .3rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.top li strong { color: var(--goud); }

table { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; }
th, td { text-align: left; padding: .6rem; border-bottom: 1px solid rgba(255, 255, 255, .15); }
th { color: var(--goud); }
tbody tr:first-child td { font-weight: 700; }