:root{
  --bg:#0b0f14; --panel:#0f1622; --panel-2:#111b2a; --line:#1c2737;
  --text:#e6eef9; --muted:#9aa4b2; --accent:#7aa2ff; --accent2:#54d2a9; --warn:#f0c36b; --danger:#f05d6c;
}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu}
.container{max-width:1100px;margin:0 auto;padding:24px}
.card{background:var(--panel);border:1px solid #232b36;border-radius:12px;padding:16px}
.btn{background:var(--accent);color:#07101a;border:none;border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:700;text-decoration:none;display:inline-inline}
.btn.alt{background:var(--accent2);}
.btn.danger{background:var(--danger);}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#232b36;color:var(--muted);font-size:12px}
.right{margin-left:auto}

.dice{display:flex;gap:8px;margin:12px 0}
.die{width:56px;height:56px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#0b0e13;border:1px solid #2b3442;font-size:22px;cursor:pointer;transition:transform .15s}
.die.held{outline:2px solid var(--warn)}
@keyframes spin{
  0%{transform:rotate(0) scale(1.0)}
  50%{transform:rotate(180deg) scale(1.1)}
  100%{transform:rotate(360deg) scale(1.0)}
}
.die.rolling{ animation: spin .35s linear infinite; opacity:.9; filter: drop-shadow(0 0 6px rgba(122,162,255,.35)); }

.table{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px; }
.table th, .table td{ padding:10px 12px; border-bottom:1px solid var(--line); }
.table th{
  background: linear-gradient(180deg, rgba(18,27,40,.9), rgba(16,24,35,.9));
  color:var(--muted); font-weight:700; text-align:left;
  position:sticky; top:0; z-index:1;
}
.table td{ color:var(--text); background:var(--panel); }
.table tr:nth-child(even) td{ background:var(--panel-2); }
.table td.cat{ color:var(--muted); font-weight:700; white-space:nowrap; }
.table tr:hover td{ background:#0e1827; }

.score-cell{ text-align:center; min-width:72px; }
.score-cell.clickable{ cursor:pointer; background:#0f1b2d; outline:1px dashed rgba(122,162,255,.35); }
.score-cell.clickable:hover{ outline-color:var(--accent); background:#10213a; }

tr.totals th{ background:#0d1522; color:#b7c1d1; border-top:2px solid var(--line); }

.export{display:none;gap:8px;margin-top:8px}
.export.visible{display:flex}

/* Compact scoreboard + layout tweaks */
.table.compact th, .table.compact td{ padding:6px 8px; font-size:14px; }
.score-cell{ min-width:56px; }
.compact-top{ margin-top:8px; }
.push-down{ margin-top:18px; }

/* Make sure header doesn't block clicks; cells always clickable */
.table th, .table td{ position:relative; }
.score-cell.clickable{ pointer-events:auto; }


/* Compact header */
.compact-header h2{ margin:4px 0; font-size:20px; }
.compact-header .badge{ margin-top:4px; }
.container{ max-width:1200px; }

/* Two-column layout so dice are visible */
.layout{ display:grid; grid-template-columns: 1fr; gap:12px; }
@media (min-width: 1024px){
  .layout{ grid-template-columns: 1fr 360px; align-items:start; }
  .sticky-side{ position:sticky; top:12px; }
}
.turn-area{ margin-top:8px; }
.controls{ margin-top:6px; }

/* Table alignment & fixed layout */
.table{ table-layout: fixed; }
.table col.col-cat{ width: 180px; }
.table col.col-player{ width: 90px; }
.table th, .table td{ text-align:center; }
.table td.cat, .table th.cat{ text-align:left; }
.table.compact th, .table.compact td{ padding:6px 8px; font-size:14px; }
.score-cell{ min-width:56px; }

/* Remove invite area entirely */
#inviteUrl{ display:none; }

/* Copy link visibility handled via JS; we hide by default until status loaded */
#copyLinkBtn{ display:none; }
/* Highlight kolom van speler die aan de beurt is */
.turn-col{
  background: rgba(84,210,169,.18) !important;
  border-left: 1px solid rgba(84,210,169,.35);
  border-right: 1px solid rgba(84,210,169,.35);
}
tr:hover td.turn-col { background: rgba(84,210,169,.22) !important; }


/* Alignment: fixed layout and consistent centering */
.table{ table-layout: fixed; width:100%; }
.table th, .table td{ text-align:center; }
.table th.cat, .table td.cat{ text-align:left; }
.table.compact th, .table.compact td{ padding:6px 8px; font-size:14px; }
col.col-cat{ width: 180px; }
col.col-player{ width: 96px; }
.bonus-cell { color:#c9d4e3; font-weight:600; }
.bonus-cell.bonus-achieved { background:rgba(84,210,169,.18); color:#54d2a9; }

/* Compact header */
.compact-header{ padding:10px 12px; }
.compact-header h2{ margin:0; font-size:19px; }
.compact-header .badge{ margin-top:4px; }

/* Layout grid */
.container{ max-width:1200px; }
.layout{ display:grid; grid-template-columns: 1fr; gap:12px; }
@media (min-width: 1024px){
  .layout{ grid-template-columns: 1fr 380px; align-items:start; }
  .sticky-side{ position:sticky; top:8px; }
}
.turn-area{ margin-top:4px; }
.dice{ justify-content:center; }


/* Highlight current player's badge */
.badge.turn-now{ background: rgba(122,162,255,.18); color: #cfe0ff; border: 1px solid rgba(122,162,255,.45); }


/* Green highlight for current turn */
.badge.turn-now{ background: rgba(84,210,169,.18); color:#d6f6ec; border:1px solid rgba(84,210,169,.55); }

/* Bigger header that contains dice, players and roll */
.header-flex{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.header-left{ display:flex; flex-direction:column; gap:2px; }
.header-right{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.header-dice{ display:flex; gap:8px; align-items:center; }
.header-controls{ display:flex; gap:8px; align-items:center; }
.header-players{ display:flex; gap:8px; flex-wrap:wrap; }

/* Make header a bit taller but still compact */
.card.header{ padding:14px 16px; }

/* Scoreboard full width below */
.layout{ display:block; }
/* --- Dice rolling animation --- */
.die.rolling {
  animation: die-roll 0.15s linear infinite;
  filter: blur(0.5px);
  opacity: 0.9;
}
@keyframes die-roll {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-2px) rotate(6deg); }
  50%  { transform: translateY(0) rotate(0deg); }
  75%  { transform: translateY(2px) rotate(-6deg); }
  100% { transform: translateY(0) rotate(0deg); }
}


/* Toast to unlock audio */
.audio-toast {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.9);
  color: #e2e8f0;
  font-size: 14px;
  z-index: 9999;
  display: none;
}
.audio-toast.show { display: inline-block; }

/* === Dice pips layout (3x3 grid) === */
.die{
  position:relative;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items:center;
  font-size:0; /* geen cijfers meer */
}
.pip{
  width:10px; height:10px; border-radius:50%;
  background: #e6eef9;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
/* positions */
.pip.tl{ grid-column:1; grid-row:1; }
.pip.tm{ grid-column:2; grid-row:1; }
.pip.tr{ grid-column:3; grid-row:1; }
.pip.ml{ grid-column:1; grid-row:2; }
.pip.mm{ grid-column:2; grid-row:2; }
.pip.mr{ grid-column:3; grid-row:2; }
.pip.bl{ grid-column:1; grid-row:3; }
.pip.bm{ grid-column:2; grid-row:3; }
.pip.br{ grid-column:3; grid-row:3; }

/* Held mag nooit animatie-effecten tonen of pips verbergen */
.die.held { animation: none !important; }
.die.held.rolling { animation: none !important; }
.die.held .pip { visibility: visible !important; }
.die.rolling .pip { visibility: hidden; } /* alleen niet-held */
/* === End-of-game modal === */
.em-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9998;
}
.em-modal{
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 9999;
}
.em-card{
  background:#121a2b; border:1px solid #223049; border-radius:14px;
  max-width:640px; width:92%; padding:16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.em-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.em-title{ margin:0; }
.em-close{ padding:6px 10px; }
.em-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }