/* Foxy in beeld, Foxy Play: spelletjes voor 2 en het Flash-duel (laadt enkel op /play, naast galerij.css en galerij-cards.css). */

/* ---------- Spelletjes voor 2 personen: elk spel met zijn eigen Foxy-icoon en kleuren ---------- */
.tweetal { padding: 90px 0; }
.tweetal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 22px; max-width: 1100px; margin: 0 auto; }
.tweetal__kaart { --k: #3ecf8e; --g1: #1f5a4a; --g2: #17323a;
    position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 24px 22px 22px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 26px; color: inherit; text-decoration: none;
    background: radial-gradient(130% 90% at 12% 0%, var(--g1) 0%, var(--g2) 55%, #14141f 100%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3); transition: translate 0.25s ease, box-shadow 0.25s ease; }
.tweetal__kaart--act { --k: #ff8aa0; --g1: #6a2236; --g2: #321a2f; }
.tweetal__kaart--hunt { --k: #b9a6ff; --g1: #40328a; --g2: #241f47; }
.tweetal__kaart:hover { translate: 0 -5px; box-shadow: 0 22px 44px rgba(0, 0, 0, 0.42); }
.tweetal__kaart:focus-visible { outline: 3px solid var(--k); outline-offset: 3px; }
.tweetal__watermerk { position: absolute; z-index: -1; right: -30px; bottom: -34px; width: 190px; height: 190px; color: var(--k); opacity: 0.08; rotate: -14deg; pointer-events: none; }
.tweetal__kop { display: flex; align-items: center; gap: 16px; }
.tweetal__icoon { flex: 0 0 auto; width: 88px; height: 88px; border-radius: 22px; rotate: -4deg; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 12px 26px rgba(0, 0, 0, 0.5); transition: rotate 0.35s ease, scale 0.35s ease; }
.tweetal__kaart:hover .tweetal__icoon { rotate: 3deg; scale: 1.06; }
.tweetal__kaart h3 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.tweetal__kaart p { margin: 0; color: rgba(255, 255, 255, 0.78); line-height: 1.55; }
.tweetal__chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 0; padding: 0; list-style: none; }
.tweetal__chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 11px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px;
    background: rgba(0, 0, 0, 0.24); font-size: 0.82rem; font-weight: 700; }
.tweetal__chip b { color: var(--k); font-weight: 800; white-space: nowrap; }
.tweetal__chip.is-uit { opacity: 0.42; }
.tweetal__chip.is-uit b { color: rgba(255, 255, 255, 0.7); }
.tweetal__meer { align-self: flex-start; margin-top: auto; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 800;
    transition: background 0.2s ease, color 0.2s ease; }
.tweetal__kaart:hover .tweetal__meer { background: var(--k); color: #14141f; }
@media (max-width: 900px) {
    .tweetal__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; max-width: 560px; }
}
@media (prefers-reduced-motion: reduce) {
    .tweetal__kaart, .tweetal__icoon { transition: none; }
    .tweetal__kaart:hover { translate: none; }
    .tweetal__kaart:hover .tweetal__icoon { rotate: -4deg; scale: 1; }
}

/* ---------- Flash-duel voor 2 ---------- */
.duel__kop { align-items: center; }
.duel__speler { --p: #ff6b35; padding: 3px 12px; border: 2px solid transparent; border-radius: 999px; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.duel__speler--2 { --p: #3b82f6; }
.duel__speler b { color: var(--p); }
.duel[data-speler="1"]:not([data-staat="einde"]) .duel__speler--1,
.duel[data-speler="2"]:not([data-staat="einde"]) .duel__speler--2 { border-color: var(--p); background: color-mix(in srgb, var(--p) 16%, transparent); color: var(--text-primary); }
.duel[data-speler="2"] .flash__kaart { box-shadow: 0 16px 30px rgba(0, 0, 0, 0.4), inset 0 0 0 6px #fffdf6, inset 0 0 0 8px rgba(59, 130, 246, 0.5); }
.duel[data-speler="2"] .flash__rug span { background: radial-gradient(circle at 50% 50%, #8fb8ff 0 9%, transparent 9.5%), repeating-linear-gradient(45deg, #1d4ed8 0 12px, #1e3a8a 12px 24px); }
.duel[data-speler="2"] .flash__balk i { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.duel .flash__einde p.duel__stand { color: var(--text-primary); font-weight: 800; }
.duel__winnaar.is-2 { color: #3b82f6; }
@media (max-width: 600px) {
    .duel .flash__einde { gap: 10px; padding: 4px; }
    .duel .flash__einde p:not(.duel__stand) { display: none; }
    .duel .flash__einde-score { font-size: 1.8rem; }
    .duel .flash__knoppen { flex-wrap: nowrap; gap: 8px; }
    .duel .flash__knoppen .btn { padding: 10px 14px; font-size: 0.88rem; white-space: nowrap; }
    .duel__kop { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; font-size: 0.8rem; }
    .duel__kop > :nth-child(2) { text-align: center; }
    .duel__speler { justify-self: start; padding: 2px 8px; }
    .duel__speler--2 { justify-self: end; }
}