/* dobbel.css — the 'Sinterklaas dobbelspel' section of /lootjes-trekken/ (and, since
   T-PADICE.2, the 'Schrottwichteln' section of /wichteln/, and since T-PADICE.3 the 'Juego de dados'
   section of /amigo-invisible/, which link this same file). Built from
   polyatic.css tokens and santa.css's card palette (--ss-paper, --ss-red, --ss-gilt);
   the die is an ivory die with santa-red 1 pip in both themes, like the printed sheet. */
.dd{margin-top:1.25rem;scroll-margin-top:1rem}
.dd-grid{display:grid;gap:1.25rem}
.dd-play{min-width:0;display:grid;gap:.625rem;align-content:start;justify-items:center;text-align:center}
.dd-play>.field{width:100%;text-align:left}
.dd-play .modes{margin-bottom:0}
.dd-form{display:grid;gap:1rem;align-content:start;min-width:0}
.dd-form .modes{margin-bottom:0}
.dd-form select{width:100%}

/* the die */
.dd-die{width:min(11rem,48vw);aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer;border-radius:1.25rem;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.dd-die svg{display:block;filter:drop-shadow(0 10px 16px rgba(0,0,0,.28))}
.dd-die .dd-body{fill:var(--ss-paper);stroke:var(--ss-ink);stroke-width:2.5}
.dd-die circle{fill:var(--ss-ink)}
.dd-die circle.dd-one{fill:var(--ss-red)}
.dd-die:hover .dd-body{fill:#fff}
.dd-die:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.dd-die.dd-rolling svg{animation:dd-tumble .42s cubic-bezier(.3,.7,.4,1)}
@keyframes dd-tumble{0%{transform:rotate(0) scale(1)}35%{transform:rotate(200deg) scale(.82)}70%{transform:rotate(330deg) scale(1.06)}100%{transform:rotate(360deg) scale(1)}}

.dd-action{margin:0;font-size:1.3125rem;font-weight:700;line-height:1.3;color:var(--ink);min-height:3.4em;max-width:26ch;display:flex;align-items:center;justify-content:center}
/* a bigger action line, to read from across the table (the die on /amigo-invisible/) */
.dd-action.dd-big{font-size:clamp(1.5rem,6.4vw,2.125rem);line-height:1.2;max-width:22ch;min-height:3.7em}
.dd-note{margin:0;min-height:1.4em;color:var(--muted);font-size:.9375rem}

/* round 2 timer */
.dd-timer{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;width:100%;padding:.625rem;border:1px solid var(--line);border-radius:.625rem;background:var(--surface-2)}
.dd-clock{font-family:var(--mono);font-size:2rem;font-weight:600;font-variant-numeric:tabular-nums;min-width:5ch;color:var(--ink)}
.dd-timer.dd-done .dd-clock{color:var(--ss-red)}
.dd-timer .btn{flex:0 1 auto}

/* this round's table */
.dd-faces{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:.25rem;text-align:left;counter-reset:dd}
.dd-faces li{counter-increment:dd;display:flex;gap:.625rem;align-items:center;padding:.375rem .5rem;border-radius:.4375rem;font-size:.9375rem;line-height:1.3;border:1px solid transparent}
.dd-faces li::before{content:counter(dd);flex:0 0 1.75rem;height:1.75rem;display:grid;place-items:center;border-radius:.375rem;background:var(--ss-paper);color:var(--ss-ink);border:1.5px solid var(--ss-ink);font-family:var(--mono);font-weight:700;font-size:.875rem}
.dd-faces li.dd-hit{border-color:var(--ss-red);background:rgba(168,36,44,.08);font-weight:600}
.dd-roundtext{margin:0;text-align:left;width:100%}

.dd-rounds{border:0;margin:0;padding:0;display:grid;gap:.375rem}
.dd-rounds legend{font-family:var(--mono);font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.375rem;padding:0}
.dd-form textarea{width:100%}
.dd label.check{align-items:flex-start}
.dd label.check input{flex:0 0 auto;margin-top:.1875rem}

/* a rules list without a die (the number-slip game on /wichteln/, which shares this sheet) */
.dd-steps{margin:0;padding:0;list-style:none;width:100%;display:grid;gap:.75rem;text-align:left}
.dd-steps li{padding:.625rem .75rem;border:1px solid var(--line);border-radius:.625rem;background:var(--surface-2)}
.dd-steps b{display:block;margin-bottom:.25rem;color:var(--ink)}
.dd-steps p{margin:0;font-size:.9375rem;line-height:1.45}

@media(min-width:900px){
  .dd-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:1.75rem}
  .dd-die{width:12rem}
}
@media(prefers-color-scheme:dark){
  .dd-faces li.dd-hit{background:rgba(255,97,101,.1)}
}
@media(prefers-reduced-motion:reduce){.dd-die.dd-rolling svg{animation:none}}