/* Gewoon Spelen – vriendenpagina */
.vr .page-title{margin:0 0 20px}
.vr-kaart{margin-bottom:16px;padding:22px}
.vr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.vr-grid .vr-kaart{margin-bottom:0}
.vr-grid + .vr-kaart,.vr-grid ~ .vr-kaart{margin-top:16px}
.vr-code{font-size:clamp(30px,6vw,40px);font-weight:900;letter-spacing:.06em;font-variant-numeric:tabular-nums;margin-top:6px}
.vr-rij{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vr-zoek{display:flex;gap:8px;margin-top:10px}
.vr-zoek input{flex:1;min-width:0;font:inherit;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--field);color:var(--ink)}
.vr-lijst{list-style:none;margin:10px 0 0;padding:0}
.vr-lijst li{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.vr-lijst li:last-child{border-bottom:0}
.vr-naam{font-weight:800;display:inline-flex;align-items:center;gap:8px}
.vr-klein{min-height:38px;padding:6px 14px;font-size:15px}
.vr-punt{width:10px;height:10px;border-radius:50%;background:var(--line);display:inline-block;flex:none}
.vr-punt.aan{background:#2fbf71;box-shadow:0 0 0 3px #2fbf7133}
.vr-badge{background:var(--strong);color:var(--on-strong);border-radius:999px;font-size:12px;padding:1px 8px}
.vr-meer{position:relative}
.vr-meer summary{list-style:none;cursor:pointer;font-weight:900;padding:6px 10px;border-radius:10px}
.vr-meer summary::-webkit-details-marker{display:none}
.vr-meer[open] div{position:absolute;right:0;top:100%;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px 14px;display:flex;flex-direction:column;gap:4px;box-shadow:0 10px 30px #0002;white-space:nowrap}
.bh-dim{color:var(--muted);font-weight:600}
#vr-blok-vak summary{cursor:pointer}
/* panelen (berichtjes, samen spelen): onderaan op telefoon, midden op computer */
.vr-paneel{position:fixed;inset:0;z-index:60;background:#0006;display:flex;align-items:flex-end;justify-content:center}
.vr-paneel[hidden]{display:none}
.vr-paneel-in{background:var(--surface);color:var(--ink);width:100%;max-width:560px;max-height:88dvh;display:flex;flex-direction:column;border-radius:24px 24px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px))}
@media(min-width:700px){.vr-paneel{align-items:center}.vr-paneel-in{border-radius:24px}}
.vr-paneel-kop{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:20px}
.vr-sluit{border:0;background:var(--bg);color:var(--ink);width:40px;height:40px;border-radius:50%;font-size:18px;cursor:pointer}
.vr-chat-lijst{flex:1;min-height:160px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:6px 2px 12px}
.vr-ballon{align-self:flex-start;background:var(--bg);border-radius:18px 18px 18px 6px;padding:8px 14px;font-weight:700;max-width:80%}
.vr-ballon.mij{align-self:flex-end;background:var(--strong);color:var(--on-strong);border-radius:18px 18px 6px 18px}
.vr-knoppen{display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid var(--line);padding-top:12px}
.vr-knoppen button{font:inherit;font-weight:700;font-size:15px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:7px 13px;cursor:pointer}
.vr-knoppen button:disabled{opacity:.5}
.vr-spellen{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;overflow-y:auto}
.vr-spellen button{font:inherit;text-align:left;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:16px;padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.vr-spellen button small{color:var(--muted);font-size:12px;font-weight:700}
.vr-gesprek{cursor:pointer;flex-direction:column;align-items:flex-start !important;gap:2px !important}
.vr-gesprek:hover{background:var(--bg)}
.vr-laatste{color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.vr-chat-uitleg{margin:0 0 8px;font-size:14px}
.vr-chat-uitleg:empty{display:none}
.vr-chat-form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-bottom:10px}
.vr-chat-form[hidden]{display:none}
.vr-chat-form textarea{flex:1;min-width:0;font:inherit;padding:10px 14px;border-radius:16px;border:1px solid var(--line);background:var(--field);color:var(--ink);resize:none;max-height:120px}
.vr-teller{width:100%;font-size:12px;text-align:right}
.vr-teller:empty{display:none}
#vr-chat .msg{margin:0 0 8px;padding:8px 12px;font-size:14px}