/* Pakjesjacht: gedeelde stijl (telefoon + tv) */
:root {
  --bg: #12090d; --bg2: #2a0f19; --card: rgba(255,255,255,.06); --line: rgba(255,255,255,.12);
  --text: #fbf3ee; --muted: #c2adab; --red: #e0343f; --gold: #f2c14e; --ok: #3ccf91; --blue: #4dabf7;
  --radius: 20px; --shadow: 0 12px 40px rgba(0,0,0,.4); color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text);
  background: radial-gradient(1200px 700px at 85% -10%, rgba(224,52,63,.35), transparent 60%),
              radial-gradient(900px 600px at -10% 110%, rgba(242,193,78,.18), transparent 60%),
              linear-gradient(180deg, var(--bg2), var(--bg)) fixed;
  -webkit-tap-highlight-color: transparent; overflow-x: hidden;
}
button { font: inherit; }
.btn { appearance: none; border: 0; cursor: pointer; font-weight: 800; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--red), #9e1520); padding: 12px 20px; border-radius: 14px; box-shadow: 0 8px 22px rgba(224,52,63,.35); transition: transform .1s, filter .1s; text-decoration: none; }
.btn:hover { filter: brightness(1.08); } .btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.ghost { background: rgba(255,255,255,.08); border: 1px solid var(--line); box-shadow: none; }
.btn.gold { background: linear-gradient(135deg, #ffd56b, #d99a1c); color: #2a1300; box-shadow: 0 8px 22px rgba(242,193,78,.35); }
.btn.small { padding: 7px 12px; font-size: .85rem; border-radius: 10px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.muted { color: var(--muted); } .center { text-align: center; }
input, select { font: inherit; color: var(--text); background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; width: 100%; }
input:focus, select:focus { outline: 2px solid rgba(242,193,78,.7); outline-offset: 1px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: .3px; }
.logo img { width: 32px; height: 32px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #2b1118; border: 1px solid var(--line); padding: 12px 18px; border-radius: 14px; box-shadow: var(--shadow); z-index: 80; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.show { opacity: 1; }
.offline { position: fixed; top: 0; left: 0; right: 0; background: #b4232c; text-align: center; padding: 6px; font-weight: 700; z-index: 90; display: none; }
body.disconnected .offline { display: block; }
.avatar { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 26px; background: rgba(255,255,255,.1); border: 2px solid var(--line); flex: none; }
/* dobbelsteen (3D) */
.die { --s: 120px; width: var(--s); height: var(--s); position: relative; transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.2,.9,.25,1); margin: 0 auto; }
.die .face { position: absolute; inset: 0; border-radius: 18%; background: linear-gradient(145deg, #fff, #e9e1dc); box-shadow: inset 0 0 18px rgba(0,0,0,.18); display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 14%; }
.die .face i { width: 70%; height: 70%; margin: auto; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff5a64, #a0131c); visibility: hidden; }
.die .face i.on { visibility: visible; }
.die .f1 { transform: rotateY(0deg) translateZ(calc(var(--s) / 2)); }
.die .f2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.die .f3 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.die .f4 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.die .f5 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.die .f6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.die.rolling { animation: tumble .45s linear infinite; transition: none; }
@keyframes tumble { to { transform: rotateX(360deg) rotateY(720deg) rotateZ(180deg); } }
@media (prefers-reduced-motion: reduce) { .die.rolling { animation: none; } }

/* dobbelsteen-uiterlijk (per speler) */
.die[data-skin="goud"] .face { background: linear-gradient(145deg, #ffe9a6, #d9a521 60%, #a87810); box-shadow: inset 0 0 18px rgba(90,50,0,.45); }
.die[data-skin="goud"] .face i { background: radial-gradient(circle at 35% 35%, #fff8e0, #7a5208); }
.die[data-skin="chocolade"] .face { background: linear-gradient(145deg, #8a5a3b, #5a3420 60%, #3d2214); box-shadow: inset 0 0 18px rgba(0,0,0,.5); }
.die[data-skin="chocolade"] .face i { background: radial-gradient(circle at 35% 35%, #fff4e6, #d9b98f); }
.die[data-skin="marsepein"] .face { background: linear-gradient(145deg, #fff0f3, #f7c6d3 60%, #e9a3b8); }
.die[data-skin="marsepein"] .face i { background: radial-gradient(circle at 35% 35%, #9be08a, #3c8a2c); }
.die[data-skin="ijs"] .face { background: linear-gradient(145deg, rgba(235,250,255,.95), rgba(160,215,240,.85)); box-shadow: inset 0 0 22px rgba(255,255,255,.9), 0 0 18px rgba(160,215,240,.5); }
.die[data-skin="ijs"] .face i { background: radial-gradient(circle at 35% 35%, #ffffff, #3d8fc2); }
.die[data-skin="nacht"] .face { background: radial-gradient(circle at 30% 20%, #3a3f8f, #141633 70%); box-shadow: inset 0 0 18px rgba(0,0,0,.6); }
.die[data-skin="nacht"] .face i { background: radial-gradient(circle at 35% 35%, #fffbe0, #f2c14e); box-shadow: 0 0 8px rgba(242,193,78,.9); }
.die[data-skin="pepernoot"] .face { background: radial-gradient(circle at 35% 30%, #d99a5b, #a8662e 70%, #7d4a1e); box-shadow: inset 0 0 18px rgba(60,30,0,.5); }
.die[data-skin="pepernoot"] .face i { background: radial-gradient(circle at 35% 35%, #5a3015, #2e170a); }

/* ---- thema Kerst: dennengroen, kerstrood en goud */
html[data-theme="kerst"] { --bg: #06120b; --bg2: #0f2a1a; --red: #d4313b; --gold: #f5cd5b; --muted: #b6c6b9; }
html[data-theme="kerst"] body {
  background: radial-gradient(1200px 700px at 85% -10%, rgba(30,140,80,.35), transparent 60%),
              radial-gradient(900px 600px at -10% 110%, rgba(212,49,59,.22), transparent 60%),
              linear-gradient(180deg, var(--bg2), var(--bg)) fixed;
}
.pjversion { position: fixed; left: 8px; bottom: 2px; z-index: 80; font-size: 10px; color: rgba(255,255,255,.28); pointer-events: none; font-variant-numeric: tabular-nums; letter-spacing: .3px; }