.start { max-width: 640px; margin: 0 auto; padding: 24px 16px 48px; display: grid; gap: 16px; }
.hero { text-align: center; padding: 20px 0 6px; }
.dice-hero { font-size: 64px; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(4deg); } }
h1 { font-size: clamp(2.2rem, 9vw, 3.4rem); margin: 6px 0; letter-spacing: -1px; background: linear-gradient(135deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { margin: 0 0 12px; font-size: 1.2rem; }
.lead { color: var(--muted); font-size: 1.1rem; max-width: 480px; margin: 0 auto; }
.row { display: flex; gap: 10px; }
.row input { flex: 1; }
#code { text-transform: uppercase; letter-spacing: 6px; font-weight: 900; font-size: 1.4rem; text-align: center; }
.small { font-size: .88rem; }
/* stappen als tijdlijn */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.steps::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(var(--gold), var(--red)); opacity: .35; }
.steps li { display: flex; gap: 14px; align-items: flex-start; padding: 8px 0; position: relative; }
.steps .ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.steps b { display: block; font-size: 1.02rem; }
.steps span { color: var(--muted); font-size: .92rem; }
/* dobbelsteen-kaarten */
.dice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.dcard { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; position: relative; overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border: 1px solid var(--line); transition: transform .15s, border-color .15s; }
.dcard:hover { transform: translateY(-2px); border-color: rgba(242,193,78,.5); }
.dcard b { display: block; font-size: 1.05rem; }
.dcard span { color: var(--muted); font-size: .88rem; }
.dcard em { font-style: normal; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 26px; opacity: .25; }
.dcard.d6 { border-color: rgba(224,52,63,.55); background: linear-gradient(145deg, rgba(224,52,63,.22), rgba(255,255,255,.03)); }
.dcard.d3 { opacity: .85; }
.mini-die { flex: none; width: 46px; height: 46px; border-radius: 11px; padding: 6px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  background: linear-gradient(145deg, #fff, #e6ddd8); box-shadow: inset 0 -3px 6px rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.35); transform: rotate(-6deg); }
.dcard:nth-child(even) .mini-die { transform: rotate(5deg); }
.mini-die i { width: 70%; height: 70%; margin: auto; border-radius: 50%; visibility: hidden; background: radial-gradient(circle at 35% 35%, #ff5a64, #a0131c); }
.mini-die i.on { visibility: visible; }
.chaos-note { margin: 14px 0 0; }
@media (prefers-reduced-motion: reduce) { .dice-hero { animation: none; } }
.hall[hidden] { display: none; }
.hall-list { display: grid; gap: 10px; }
.hgame { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); display: grid; gap: 6px; }
.hhead { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hplayers { font-size: 1.3rem; letter-spacing: 2px; }
.hawards { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .88rem; color: var(--muted); } .hawards b { color: var(--text); }
.alltime { margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(242,193,78,.08); border: 1px solid rgba(242,193,78,.3); }
.alltime h3 { margin: 0 0 8px; font-size: 1rem; color: var(--gold); }
.atrow { display: flex; align-items: center; gap: 10px; padding: 4px 0; } .atrow .pos { width: 1.6em; text-align: center; font-weight: 900; }
.atrow .av { font-size: 1.3rem; } .atrow b { flex: 1; }