/* Eigen emoji in tekst (Markup::emojiBeeld) en de emojikiezer (partials/emoji-picker.php). */
.cc-emoji { display: inline-block; width: 1.6em; height: 1.6em; margin: 0 .05em; vertical-align: -.45em; object-fit: contain; }
/* In de voorbeeldregel van de chat: zo hoog als de tekst. */
.dock-last .cc-emoji { width: 1.3em; height: 1.3em; vertical-align: -.3em; }
/* Een bericht met alleen emoji: groter, zoals op Hyves. */
.cc-emoji-groot .cc-emoji { width: 2.6em; height: 2.6em; vertical-align: middle; }

@media (prefers-reduced-motion: no-preference) {
  .cc-emoji-schud { animation: cc-schud 2.6s ease-in-out infinite; }
  .cc-emoji-tril { animation: cc-tril 1.8s ease-in-out infinite; }
  .cc-emoji-klop { animation: cc-klop 1.8s ease-in-out infinite; }
  .cc-emoji-flakker { animation: cc-flakker 2.2s ease-in-out infinite; transform-origin: 50% 90%; }
}
@keyframes cc-schud { 0%, 55%, 100% { transform: rotate(0); } 15% { transform: rotate(-6deg); } 30% { transform: rotate(5deg); } 42% { transform: rotate(-2deg); } }
@keyframes cc-tril { 0%, 60%, 100% { transform: translate(0, 0); } 10%, 30% { transform: translate(-1px, 0); } 20%, 40% { transform: translate(1px, 0); } }
@keyframes cc-klop { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(.96); } 45% { transform: scale(1.1); } }
@media (prefers-reduced-motion: no-preference) {
  .cc-emoji-glans { animation: cc-glans 2.4s ease-in-out infinite; }
  .cc-emoji-zweef { animation: cc-zweef 2.2s ease-in-out infinite; }
}
@keyframes cc-glans { 0%, 70%, 100% { filter: brightness(1); } 80% { filter: brightness(1.45) drop-shadow(0 0 3px rgba(255, 230, 150, .9)); } }
@keyframes cc-zweef { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes cc-flakker { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(.95, 1.08); } 60% { transform: scale(1.04, .96); } }

.cc-emoji-kiezer { position: relative; flex: none; }
.cc-emoji-knop { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 8px; cursor: pointer; list-style: none; transition: background .15s, transform .15s; }
.cc-emoji-knop::-webkit-details-marker { display: none; }
.cc-emoji-knop:hover, .cc-emoji-kiezer[open] .cc-emoji-knop { background: rgba(201, 164, 92, .15); transform: scale(1.06); }
.cc-emoji-knop img { width: 22px; height: 22px; }
.cc-emoji-paneel { position: fixed; z-index: 120; width: min(19rem, calc(100vw - 2rem)); max-height: 18rem; overflow-y: auto; padding: 6px 8px 8px; background: #12181a; border: 1px solid rgba(201, 164, 92, .55); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .55); }
.cc-emoji-groep { margin: 6px 2px 4px; font: 600 10.5px/1 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #c9a45c; }
.cc-emoji-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; }
.cc-emoji-raster button { display: grid; place-items: center; height: 38px; border-radius: 8px; transition: background .12s, transform .12s; }
.cc-emoji-raster button:hover, .cc-emoji-raster button:focus-visible { background: rgba(201, 164, 92, .18); transform: scale(1.12); outline: none; }
.cc-emoji-raster img { width: 30px; height: 30px; }

/* Editor zoals een tekstverwerker (partials/rich-editor.php) en de opmaak van nieuws (Markup::rich). */
.rich { border: 1px solid var(--color-line-strong, #3a4448); border-radius: 8px; background: var(--color-card-deep, #12181a); }
.rich:focus-within { border-color: var(--color-accent, #4a8a96); }
.rich-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--color-line, #2a3337); }
.rich-knop { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 6px; color: var(--color-muted, #9aa6a9); transition: background .12s, color .12s; }
.rich-knop:hover { background: rgba(255, 255, 255, .06); color: var(--color-ink, #e8ecec); }
.rich-knop[aria-pressed="true"] { background: rgba(201, 164, 92, .18); color: #ecd08f; }
.rich-scheiding { width: 1px; height: 1.25rem; margin: 0 4px; background: var(--color-line, #2a3337); }
.rich-balk .cc-emoji-knop { width: 2rem; height: 2rem; }
.rich-linkbalk { display: flex; flex: 1 1 18rem; align-items: center; gap: 6px; margin-left: 6px; }
.rich-linkbalk[hidden] { display: none; }
.rich-linkveld { flex: 1; min-width: 8rem; padding: .3rem .55rem; font-size: 13.5px; }
.rich-vak { min-height: 14rem; max-height: 60vh; overflow-y: auto; padding: .75rem .9rem; font-size: 14.5px; line-height: 1.65; color: var(--color-ink, #e8ecec); outline: none; }
.rich-vak:empty::before { content: attr(data-placeholder); color: var(--color-faint, #6b777a); }
.rich-vak.is-fout { box-shadow: inset 0 0 0 2px #e5625a; }
.rich-bron { border: 0; border-radius: 0 0 8px 8px; }
.news-body h4, .rich-vak h4 { margin: .9em 0 .3em; font-size: 1.08em; font-weight: 700; color: var(--color-ink, #e8ecec); }
.news-body ul, .rich-vak ul { margin: .35em 0 .6em; padding-left: 1.3em; list-style: disc; }
.news-body li, .rich-vak li { margin: .15em 0; }
.news-body blockquote, .rich-vak blockquote { margin: .6em 0; padding: .45em .8em; border-left: 3px solid #c9a45c; background: rgba(201, 164, 92, .07); border-radius: 0 6px 6px 0; }
.news-body strong, .rich-vak b, .rich-vak strong { color: var(--color-ink, #e8ecec); }
.rich-vak a { color: var(--color-accent, #4a8a96); text-decoration: underline; }

/* Kaartje bij een spelersnaam (kaartje.js, partials/speler-kaart.php). */
.sk-kaart { position: fixed; z-index: 130; width: 17rem; padding: 10px 12px; background: #12181a; border: 1px solid rgba(201, 164, 92, .55); border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .6); color: var(--color-ink, #e8ecec); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.sk-kaart.is-aan { opacity: 1; transform: none; }
.sk-kop { display: flex; gap: 10px; align-items: center; }
.sk-avatar { flex: none; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; border: 2px solid #c9a45c; }
.sk-naam { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 15px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-sub { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12px; color: var(--color-muted, #9aa6a9); }
.sk-cijfers { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-line, #2a3337); }
.sk-cijfers dt { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--color-faint, #6b777a); }
.sk-cijfers dd { margin: 1px 0 0; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sk-dood { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; color: #e5625a; }
@media (prefers-reduced-motion: reduce) { .sk-kaart { transition: none; } }

/* Stickers: groot en bewegend, zoals een emote. */
.cc-sticker { display: inline-block; width: 7rem; height: 7rem; margin: .15rem 0; vertical-align: middle; object-fit: contain; }
.cc-sticker { background: transparent; }
.dock-last .cc-sticker { width: 1.6em; height: 1.6em; margin: 0; vertical-align: -.45em; }
.cc-emoji-raster.is-stickers { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.cc-emoji-raster.is-stickers button, .cc-emoji-raster.is-stickers a { height: 64px; }
.cc-emoji-raster.is-stickers img { width: 58px; height: 58px; }
.cc-emoji-raster a { display: grid; place-items: center; height: 38px; border-radius: 8px; }
.cc-emoji-raster.is-dicht img { filter: grayscale(.85) brightness(.55); }
.cc-emoji-raster.is-dicht a:hover img { filter: grayscale(.3) brightness(.85); }
.cc-emoji-groep { display: flex; align-items: center; gap: 6px; }
.cc-emoji-label { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; padding: 2px 6px; border-radius: 999px; font: 600 10px/1.2 Inter, sans-serif; letter-spacing: 0; text-transform: none; }
.cc-emoji-label.is-slot { background: rgba(201, 164, 92, .16); color: #ecd08f; }
.cc-emoji-label.is-slot:hover { background: rgba(201, 164, 92, .3); }
.cc-emoji-label.is-thema { background: rgba(229, 140, 40, .2); color: #f2a35a; }
.cc-emoji-winkel { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 8px; padding: 6px; border-top: 1px solid var(--color-line, #2a3337); font-size: 12px; color: #ecd08f; }
.cc-emoji-winkel:hover { color: #fff; }

/* Emojiwinkel */
.emoji-voorbeeld { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.emoji-voorbeeld img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.emoji-voorbeeld.is-stickers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.emoji-voorbeeld.is-stickers img { max-height: 7rem; }
.emoji-pakket.is-donateur { border-color: rgba(201, 164, 92, .6); box-shadow: 0 0 0 1px rgba(201, 164, 92, .25), 0 0 24px rgba(201, 164, 92, .08); }

/* Donateur worden! in het menu: goud, met een glinsterend diamantje. */
.nav-donateur { position: relative; font-weight: 700; color: #f4d27a !important; background: linear-gradient(90deg, rgba(201, 164, 92, .16), rgba(201, 164, 92, 0) 85%); border-radius: 6px; }
.nav-donateur:hover { background: linear-gradient(90deg, rgba(201, 164, 92, .3), rgba(201, 164, 92, .05) 85%); color: #fff3cf !important; }
.nav-diamant { flex: none; width: 22px; height: 22px; margin-right: 6px; filter: drop-shadow(0 0 4px rgba(120, 190, 255, .55)); }
.nav-donateur .nav-glinster { position: absolute; left: 13px; top: 4px; width: 8px; height: 8px; pointer-events: none; background: radial-gradient(circle, #fff 0 20%, rgba(255, 255, 255, 0) 70%); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .nav-diamant { animation: nav-diamant 3s ease-in-out infinite; }
  .nav-donateur .nav-glinster { animation: nav-glinster 3s ease-in-out infinite; }
}
@keyframes nav-diamant { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.08); } }
@keyframes nav-glinster { 0%, 55%, 100% { opacity: 0; transform: scale(.4); } 65% { opacity: 1; transform: scale(1.6) rotate(45deg); } 75% { opacity: 0; transform: scale(.6); } }
.emoji-voorbeeld .cc-sticker { width: 100%; height: auto; aspect-ratio: 1; margin: 0; }

/* Elite (25+ donaties): echte gouden naam met een glansstreep en twinkelende sterretjes. Werkt overal waar de naam in de
   statuskleur staat (PlayerStatus::ELITE_KLEUR), ook in tekst die JavaScript bouwt (chatregel). */
.naam-elite, [style*="color: #e8b94a"], [style*="color:#e8b94a"], [style*="color: rgb(232, 185, 74)"] {
  position: relative; display: inline-block;
  background: linear-gradient(100deg, #8a6a1f 0%, #f4d27a 22%, #fff3c4 30%, #d9a93a 42%, #a8781f 60%, #f6dc8c 78%, #8a6a1f 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important;
  filter: drop-shadow(0 0 5px rgba(244, 196, 80, .35));
}
.naam-elite::before, .naam-elite::after,
[style*="color: #e8b94a"]::before, [style*="color: #e8b94a"]::after, [style*="color:#e8b94a"]::before, [style*="color:#e8b94a"]::after,
[style*="color: rgb(232, 185, 74)"]::before, [style*="color: rgb(232, 185, 74)"]::after {
  content: "✦"; position: absolute; font-size: 8px; line-height: 1; color: #fff6d0; -webkit-text-fill-color: #fff6d0; text-shadow: 0 0 6px #ffd86b; opacity: 0; pointer-events: none;
}
/* Binnen de naam (niet erbuiten): een vak met truncate/overflow knipt anders de sterretjes weg. */
.naam-elite::before, [style*="color: #e8b94a"]::before, [style*="color:#e8b94a"]::before, [style*="color: rgb(232, 185, 74)"]::before { left: 0; top: 0; }
.naam-elite::after, [style*="color: #e8b94a"]::after, [style*="color:#e8b94a"]::after, [style*="color: rgb(232, 185, 74)"]::after { right: 0; bottom: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .naam-elite, [style*="color: #e8b94a"], [style*="color:#e8b94a"], [style*="color: rgb(232, 185, 74)"] { animation: elite-veeg 3.4s ease-in-out infinite; }
  .naam-elite::before, [style*="color: #e8b94a"]::before, [style*="color:#e8b94a"]::before, [style*="color: rgb(232, 185, 74)"]::before { animation: elite-twinkel 2.8s ease-in-out infinite; }
  .naam-elite::after, [style*="color: #e8b94a"]::after, [style*="color:#e8b94a"]::after, [style*="color: rgb(232, 185, 74)"]::after { animation: elite-twinkel 2.8s ease-in-out 1.4s infinite; }
}
@keyframes elite-veeg { 0% { background-position: 100% 0; } 60%, 100% { background-position: -50% 0; } }
@keyframes elite-twinkel { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 15% { opacity: 1; transform: scale(1.2) rotate(45deg); } 30% { opacity: 0; transform: scale(.4) rotate(90deg); } }

/* Draaiende gouden lijst om de avatar (kaartje bij een naam, profiel). */
@property --elite-hoek { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.elite-lijst { display: inline-block; flex: none; padding: 3px; border-radius: 11px; line-height: 0; background: conic-gradient(from var(--elite-hoek), #8a6a1f, #fff1b8, #d9a93a, #8a6a1f, #f6dc8c, #8a6a1f); box-shadow: 0 0 12px rgba(244, 196, 80, .4); }
.elite-lijst > img { border-color: transparent !important; }
@media (prefers-reduced-motion: no-preference) { .elite-lijst { animation: elite-draai 4s linear infinite; } }
@keyframes elite-draai { to { --elite-hoek: 360deg; } }
/* Labels die zelf absoluut staan (donateursladder) houden hun plek; alleen het goud en de glans gelden. */
.donor-ladder-label[style] { position: absolute; display: block; }

/* Account > Voorkeuren: twee onafhankelijke kolommen, zodat een lang blok geen gat laat in de andere kolom. */
.account-kolommen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.account-kolom { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.account-kolom > .card { margin: 0; }
@media (min-width: 1280px) { .account-kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Geen onderstreping op een gouden naam: die lijn krijgt het verloop mee en oogt vlekkerig. Bij aanwijzen licht hij feller op. */
.naam-elite, [style*="color: #e8b94a"], [style*="color:#e8b94a"], [style*="color: rgb(232, 185, 74)"] { text-decoration: none !important; }
a.naam-elite:hover, a[style*="color: #e8b94a"]:hover, a[style*="color:#e8b94a"]:hover { filter: brightness(1.25) drop-shadow(0 0 7px rgba(244, 196, 80, .6)); }

/* Telefoontje naast een naam: speelt via de app (app_icoon in helpers.php). */
.app-icoon { display: inline-flex; align-items: center; margin-left: 3px; color: var(--color-muted, #9aa6a9); vertical-align: -2px; }

/* Klassieke weergave als app op een staande gsm (PWA): de snelbalk onderaan groter en hoger, weg van de veegbalk van de iPhone.
   --tabbar-h groeit mee, zodat de chatbalk en de pagina-inhoud er netjes boven blijven. */
@media (display-mode: standalone) and (max-width: 600px) and (orientation: portrait) {
  body[data-layout="ingame"] { --tabbar-h: calc(5.4rem + env(safe-area-inset-bottom)); }
  body[data-layout="ingame"] .tabbar { padding-top: .75rem; padding-bottom: max(1.4rem, calc(env(safe-area-inset-bottom) + .6rem)); }
  body[data-layout="ingame"] .tabbar-item { gap: .3rem; font-size: 12.5px; }
  body[data-layout="ingame"] .tabbar-item .icon { width: 1.85rem; height: 1.85rem; }
}

/* Uitnodiging "Speel als app" (partials/app-installeer.php): onderaan, net boven de menubalk. */
.app-uitnodiging { position: fixed; left: 8px; right: 8px; bottom: calc(var(--tabbar-h, 0px) + 10px); z-index: 75; max-width: 30rem; margin: 0 auto; background: #12181a; border: 1px solid rgba(201, 164, 92, .6); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .6); animation: app-in .35s ease-out; }
.app-uitnodiging[hidden] { display: none; }
.app-uitnodiging-balk { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; font-size: 13.5px; }
.app-uitnodiging-icoon img { width: 36px; height: 36px; border-radius: 9px; }
.app-uitnodiging-weg { display: grid; place-items: center; width: 28px; height: 28px; flex: none; color: var(--color-faint, #6b777a); }
.app-uitnodiging-stappen { border-top: 1px solid var(--color-line, #2a3337); padding: 10px 14px 6px; font-size: 13px; color: var(--color-muted, #9aa6a9); }
.app-uitnodiging-stappen ol { display: grid; gap: 7px; }
.app-uitnodiging-stappen li { display: flex; align-items: center; gap: 8px; }
.app-uitnodiging-stappen li > span { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: rgba(201, 164, 92, .2); color: #ecd08f; font-weight: 700; font-size: 11px; }
.app-uitnodiging-stappen li > p { margin: 0; min-width: 0; }
.app-uitnodiging-stappen b { white-space: nowrap; color: var(--color-ink, #e8ecec); }
.app-uitnodiging-pijl { text-align: center; color: #ecd08f; font-size: 14px; animation: app-pijl 1.2s ease-in-out infinite; }
@keyframes app-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes app-pijl { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .app-uitnodiging, .app-uitnodiging-pijl { animation: none; } }

/* Als app op het beginscherm (gsm, tablet): geen scrollbalken zoals op een website; scrollen werkt gewoon. */
@media (display-mode: standalone) and (pointer: coarse) {
  html, body, * { scrollbar-width: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; }
}

/* Onderaan het gsm-menu: de taalkeuze (in de app is er geen voettekst). */
.menu-onder { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; padding: 12px 0 28px; border-top: 1px solid var(--color-line, #2a3337); font-size: 12.5px; color: var(--color-faint, #6f7b7e); }
.menu-onder > span { font-weight: 600; color: var(--color-muted, #9aa6a9); }
.menu-onder > details { margin-left: auto; }
.menu-onder .lang-switch-menu { left: auto; right: 0; }
@media (display-mode: standalone) { .app-verberg { display: none !important; } }


/* Snelkoppelingen verslepen in het gsm-menu: geen link-slepen of menu van het toestel; de opgepakte tegel zweeft boven de rest. */
[data-fav-sheet] .menu-fav { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
[data-editing] .menu-fav-cell { touch-action: none; }
.menu-fav-cell.is-gesleept { position: relative; z-index: 5; transition: none; }
.menu-fav-cell.is-gesleept .menu-fav { animation: none; transform: scale(1.08); box-shadow: 0 12px 28px rgba(0, 0, 0, .55); border-color: #c9a45c; }

/* Team: dempen in de chat (rechtermuisknop op een bericht). */
.dock-demp { position: fixed; z-index: 95; display: grid; gap: 9px; width: min(300px, calc(100vw - 16px)); padding: 12px; border: 1px solid var(--color-accent, #4a8a96); border-radius: 10px; background: var(--color-card, #161d20); box-shadow: 0 16px 40px rgba(0, 0, 0, .6); font-size: 13px; color: var(--color-ink, #e8ecec); }
.dock-demp[hidden] { display: none; }
.dock-demp-kop { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; }
.dock-demp-kop b { color: #ecd08f; }
.dock-demp-duur { display: flex; flex-wrap: wrap; gap: 5px; }
.dock-demp-duur button { padding: 4px 9px; border: 1px solid var(--color-line-strong, #36424a); border-radius: 999px; color: var(--color-muted, #9aa6a9); font-size: 12px; }
.dock-demp-duur button[aria-pressed="true"] { border-color: #c9a45c; background: rgba(201, 164, 92, .18); color: #ecd08f; }
.dock-demp-knoppen { display: flex; align-items: center; gap: 6px; }
.dock-demp-op { margin-left: auto; color: var(--color-muted, #9aa6a9); font-size: 12px; text-decoration: underline; }

/* Casino-lobby: de tafel zelf licht op als je erover gaat (exacte uitsnede, zoals de gebouwen op de stadskaart), met hoeveel spelers er nu aan zitten. */
.casino-tafel { position: absolute; inset: 0; display: block; opacity: 0; pointer-events: none; transition: opacity .18s; filter: brightness(1.32) saturate(1.12) drop-shadow(0 0 3px rgba(236, 208, 143, .95)) drop-shadow(0 0 14px rgba(236, 208, 143, .55)); will-change: opacity; }
.casino-tafel img { display: block; width: 100%; height: 100%; }
.casino-spot:hover .casino-tafel, .casino-spot:focus-visible .casino-tafel { opacity: 1; }
.casino-spot:hover .casino-spot-label b { color: #ffe7a8; text-shadow: 0 0 10px rgba(255, 210, 120, .7); }
.casino-spot-spelers { display: inline-flex; align-items: center; gap: .3rem; color: #9ff0b0; font-size: 10.5px; }
.casino-spot-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px #4ade80; animation: casino-dot 1.6s ease-in-out infinite; }
@keyframes casino-dot { 50% { opacity: .35; } }
/* Met een muis: het aantal pas bij het overgaan; op een gsm altijd. */
@media (hover: hover) { .casino-spot-spelers { display: none; } .casino-spot:hover .casino-spot-spelers, .casino-spot:focus-visible .casino-spot-spelers { display: inline-flex; } }
.casino-aanwezig { display: grid; gap: 6px; font-size: 13.5px; }

/* Duels in het casino. */
.duel-new { display: grid; gap: 12px; }
.duel-spellen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 8px; border: 0; margin: 0; padding: 0; }
.duel-spel input { position: absolute; opacity: 0; pointer-events: none; }
.duel-spel > span { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; padding: 10px 12px; border: 1px solid var(--color-line-strong, #36424a); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.duel-spel small { grid-column: 2; color: var(--color-faint, #6f7b7e); font-size: 11.5px; }
.duel-spel input:checked + span { border-color: #c9a45c; background: rgba(201, 164, 92, .12); }
.duel-spel input:focus-visible + span { outline: 2px solid #c9a45c; outline-offset: 2px; }
.duel-row { display: grid; gap: 10px; padding: 12px 16px; font-size: 13.5px; }
.duel-row-open { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.duel-row-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.duel-hand { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 10px; }
.duel-cards { display: flex; gap: 6px; flex-wrap: wrap; }
.duel-total { display: inline-grid; place-items: center; min-width: 34px; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .45); color: #fff; font-weight: 700; font-size: 13px; }
.duel-uitslag { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.duel-uitslag > div { display: grid; justify-items: start; gap: 6px; padding: 10px; border: 1px solid var(--color-line, #2a3337); border-radius: 10px; }
.duel-uitslag .pcard { width: 3.2rem; height: 4.5rem; }
.duel-uitslag .pcard-pip { font-size: 1.6rem; }
.duel-wie { font-size: 12px; color: var(--color-muted, #9aa6a9); font-weight: 600; }
.duel-die { font-size: 40px; line-height: 1; color: #f3f6f7; }
.duel-stempel { justify-self: start; margin: 0; padding: 3px 10px; border-radius: 6px; font-weight: 700; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; border: 2px solid currentColor; transform: rotate(-2deg); }
.duel-stempel.is-winst { color: #4ade80; }
.duel-stempel.is-verlies { color: #f87171; }
.duel-stempel.is-gelijk { color: #ecd08f; }