.dd-stamtafel { max-width: 720px; }

/* Game nav */
.dst-games-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
@media(max-width:520px){ .dst-games-nav{grid-template-columns:1fr;} }

.dst-game-card {
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:20px 12px;
  background:#fff; border:1.5px solid var(--dd-border); border-radius:var(--dd-radius);
  cursor:pointer; font-family:var(--dd-font); text-align:center;
  transition:all .18s;
}
.dst-game-card:hover  { border-color:var(--dd-green); transform:translateY(-2px); }
.dst-game-card.active { border-color:var(--dd-green); background:var(--dd-green); color:#fff; }
.dst-gc-icon   { font-size:28px; }
.dst-game-card strong { font-size:14px; }
.dst-game-card span   { font-size:12px; opacity:.7; }

/* Arena */
.dst-arena { background:#fff; border-radius:var(--dd-radius); border:1.5px solid var(--dd-border); padding:24px; min-height:260px; margin-bottom:24px; }

.dst-game-header { display:flex; gap:16px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.dst-timer-wrap  { font-size:14px; font-weight:700; color:var(--dd-amber); }
.dst-score-wrap  { font-size:14px; color:var(--dd-text); }
.dst-q-count     { font-size:13px; color:var(--dd-muted); margin-left:auto; }

.dst-progress-bar  { height:4px; background:#f0e4cc; border-radius:4px; margin-bottom:20px; overflow:hidden; }
.dst-progress-fill { height:100%; background:var(--dd-green); transition:width .4s; }

.dst-question { font-size:18px; font-weight:600; color:var(--dd-green); margin-bottom:18px; line-height:1.4; }

.dst-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:440px){ .dst-options{grid-template-columns:1fr;} }

.dst-opt-btn {
  padding:12px 16px; background:var(--dd-linen); border:1.5px solid var(--dd-border);
  border-radius:10px; cursor:pointer; font-family:var(--dd-font); font-size:14px;
  color:var(--dd-text); text-align:left; transition:all .14s; line-height:1.3;
}
.dst-opt-btn:hover:not(:disabled) { border-color:var(--dd-green); background:#f0f7ee; }
.dst-opt-btn.correct  { background:#e8f7ec; border-color:#27ae60; color:#1a7a40; }
.dst-opt-btn.wrong    { background:#fdecea; border-color:#c0392b; color:#8e2020; }
.dst-opt-btn:disabled { cursor:default; }

.dst-feedback {
  margin-top:14px; padding:12px 16px; border-radius:10px; font-size:14px;
  animation:dstFade .25s ease both;
}
@keyframes dstFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.dst-feedback.correct { background:#e8f7ec; color:#1a7a40; }
.dst-feedback.wrong   { background:#fdecea; color:#8e2020; }
.dst-feedback.info    { background:#fff8e6; color:#7a5010; }

/* Notable */
.dst-notable-card {
  background:linear-gradient(135deg,#f5ede0,#ede0cc); border:1.5px solid var(--dd-border);
  border-radius:14px; padding:24px; margin-bottom:18px; text-align:center;
  animation:dstFlip .35s ease both;
}
@keyframes dstFlip{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.dst-notable-name { font-size:22px; font-weight:700; color:var(--dd-green); margin-bottom:10px; }
.dst-notable-fact { font-size:14.5px; color:var(--dd-text); line-height:1.65; font-style:italic; }
.dst-notable-btns { display:flex; gap:12px; justify-content:center; }
.dst-notable-btns .dd-btn { min-width:160px; }

/* Dish */
.dst-dish-clue {
  background:var(--dd-linen); border-left:4px solid var(--dd-amber); padding:16px 18px;
  border-radius:0 10px 10px 0; font-size:16px; line-height:1.6; color:var(--dd-text);
  margin-bottom:16px; font-style:italic;
}
.dst-dish-input {
  width:100%; padding:12px 16px; border:1.5px solid var(--dd-border); border-radius:10px;
  font-size:15px; font-family:var(--dd-font); color:var(--dd-text); margin-bottom:10px;
  outline:none; transition:border-color .15s;
}
.dst-dish-input:focus { border-color:var(--dd-amber); }
.dst-dish-hint { font-size:12.5px; color:var(--dd-muted); margin-bottom:12px; min-height:18px; }

/* End screen */
.dst-endscreen { text-align:center; padding:8px; }
.dst-end-trophy { font-size:52px; margin-bottom:12px; animation:dstBounce .6s cubic-bezier(0.34,1.5,0.64,1) both; }
@keyframes dstBounce{from{transform:scale(0)}to{transform:scale(1)}}
.dst-endscreen h3  { font-size:24px; color:var(--dd-green); margin:0 0 8px; }
.dst-endscreen > p { font-size:16px; color:var(--dd-text); margin:0 0 20px; }
.dst-end-save { display:flex; gap:10px; justify-content:center; margin-bottom:14px; flex-wrap:wrap; }
.dst-name-input {
  padding:10px 16px; border:1.5px solid var(--dd-border); border-radius:24px;
  font-size:14px; font-family:var(--dd-font); min-width:200px; outline:none;
}
.dst-end-reward { background:#fff8e6; border:1.5px solid var(--dd-amber); border-radius:12px; padding:14px; margin:0 0 16px; font-size:14px; color:var(--dd-text); }
.dst-end-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.dst-end-actions .dd-btn,.dst-end-actions a { text-decoration:none; }

/* Leaderboard */
.dst-leaderboard { background:var(--dd-linen); border-radius:var(--dd-radius); border:1.5px solid var(--dd-border); padding:22px; }
.dst-lb-title { font-size:18px; color:var(--dd-green); margin:0 0 14px; }
.dst-lb-tabs  { display:flex; gap:8px; margin-bottom:14px; }
.dst-lb-tab   { padding:6px 16px; border:1.5px solid var(--dd-border); border-radius:20px; background:#fff; cursor:pointer; font-size:13px; font-family:var(--dd-font); transition:all .14s; }
.dst-lb-tab.active { background:var(--dd-green); border-color:var(--dd-green); color:#fff; }
.dst-lb-row   { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--dd-border); font-size:14px; }
.dst-lb-row:last-child { border-bottom:none; }
.dst-lb-rank  { width:24px; font-weight:700; color:var(--dd-amber); }
.dst-lb-name  { flex:1; color:var(--dd-text); }
.dst-lb-score { font-weight:700; color:var(--dd-green); }
.dst-lb-date  { font-size:11.5px; color:var(--dd-muted); }
.dst-lb-empty { font-size:14px; color:var(--dd-muted); font-style:italic; margin:0; }
