:root{--bg:#1f2150;--bg2:#2a2c6b;--ink:#fff5e1;--muted:#c9c6e8;--card:#2b2e66;--line:rgba(255,245,225,.16);--yel:#ffc83d;--pink:#ff5d8f;--teal:#2ec4b6;--navy:#1f2150;--shadow:#0d0e2a}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;color:var(--ink);font-family:Nunito,Verdana,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body{background:radial-gradient(120% 80% at 50% 0%,var(--bg2) 0%,var(--bg) 60%) fixed,var(--bg);min-height:100vh;min-height:100dvh}
a{color:var(--yel)}
main{width:100%;max-width:1180px;margin:0 auto;padding:calc(24px + env(safe-area-inset-top,0px)) 20px calc(28px + env(safe-area-inset-bottom,0px))}

/* Telefoon: alles netjes gecentreerd in een smalle kolom */
.phone{max-width:460px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:18px;text-align:center}
.phone.top{justify-content:flex-start}

.logo{font:700 clamp(40px,11vw,64px)/1 Fredoka,'Trebuchet MS',sans-serif;margin:0;letter-spacing:-.5px}
.logo b{color:var(--yel);font-weight:700}
h1{font:700 clamp(34px,9vw,56px)/1.05 Fredoka,'Trebuchet MS',sans-serif;margin:0}
h2{font:700 clamp(24px,3vw,32px)/1.1 Fredoka,'Trebuchet MS',sans-serif;margin:0 0 14px}
.sub{font-size:clamp(17px,2.2vw,22px);font-weight:700;color:var(--muted);margin:0;line-height:1.4}
.small{font-size:15px;font-weight:700;color:var(--muted)}

.card{background:var(--card);border:2px solid var(--line);border-radius:28px;padding:24px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.stack{display:flex;flex-direction:column;gap:14px}

.btn{display:inline-block;font:700 clamp(22px,3.4vw,32px) Fredoka,'Trebuchet MS',sans-serif;padding:14px 36px;border-radius:999px;border:0;background:var(--yel);color:var(--navy);cursor:pointer;box-shadow:0 6px 0 var(--shadow);transition:transform .06s,box-shadow .06s;text-decoration:none}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--shadow)}
.btn:disabled{opacity:.45;cursor:default}
.btn.block{width:100%}
.ghost{font:800 16px Nunito,Verdana,sans-serif;background:transparent;color:var(--ink);border:2px solid var(--line);border-radius:999px;padding:10px 18px;cursor:pointer;text-decoration:none}
.ghost:hover{border-color:var(--ink)}

label{display:block;text-align:left;font-weight:800;color:var(--muted);font-size:15px;margin:0 0 -6px 6px}
input{width:100%;font:700 26px Fredoka,'Trebuchet MS',sans-serif;padding:14px 20px;border-radius:18px;border:2px solid var(--line);background:rgba(0,0,0,.18);color:var(--ink);outline:none;user-select:text;-webkit-user-select:text}
input::placeholder{color:rgba(255,245,225,.35)}
input:focus{border-color:var(--yel)}
.err{color:var(--pink);font-weight:800;margin:0;min-height:0}
.err:empty{display:none}
.warn{background:var(--pink);color:var(--navy);font-weight:800;font-size:18px;border-radius:18px;padding:12px 18px;margin:0 0 20px}

.pill{display:inline-block;font:700 16px Fredoka,'Trebuchet MS',sans-serif;background:rgba(255,245,225,.1);color:var(--muted);border-radius:999px;padding:6px 14px}

/* Uitslag */
.board{display:flex;flex-direction:column;gap:10px;text-align:left}
.row{display:grid;grid-template-columns:40px 1fr auto;gap:4px 14px;align-items:center;background:var(--card);border:2px solid var(--line);border-radius:20px;padding:12px 18px}
.row.me{border-color:var(--yel);box-shadow:0 0 0 2px var(--yel) inset}
.pos{font:700 26px Fredoka,'Trebuchet MS',sans-serif;color:var(--muted);grid-row:span 2}
.who{font:700 clamp(21px,2.6vw,28px)/1.1 Fredoka,'Trebuchet MS',sans-serif;overflow-wrap:anywhere}
.t{grid-column:2;font-weight:800;font-size:16px;color:var(--muted)}
.tag{grid-column:3;grid-row:1/span 2;font:700 17px Fredoka,'Trebuchet MS',sans-serif;padding:7px 14px;border-radius:999px;color:var(--navy);white-space:nowrap;text-align:center}
.shot{background:var(--pink)}.safe{background:var(--teal)}
@media(max-width:380px){.tag{grid-column:2;grid-row:auto;justify-self:start}}
.board.reveal .row{opacity:0;transform:translateY(14px) scale(.97);transition:opacity .5s,transform .5s}
.board.reveal .row.in{opacity:1;transform:none}
.t.num{font:700 clamp(20px,2.4vw,28px) Fredoka,'Trebuchet MS',sans-serif;color:var(--yel)}
.die{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);width:min(66vw,280px);aspect-ratio:1;margin:8px auto;padding:13%;gap:3%;background:var(--ink);border:0;border-radius:22%;box-shadow:0 10px 0 var(--shadow);cursor:pointer;touch-action:manipulation}
.die:active{transform:translateY(4px);box-shadow:0 6px 0 var(--shadow)}
.pip{width:78%;height:78%;place-self:center;border-radius:50%;background:var(--navy);visibility:hidden}
.pip.on{visibility:visible}
.die.six{background:var(--yel)}.die.six .pip{background:var(--pink)}
.die.roll{animation:roll .55s ease-out}
@keyframes roll{0%{transform:rotate(0) scale(1)}35%{transform:rotate(-14deg) scale(.92)}70%{transform:rotate(10deg) scale(1.04)}100%{transform:rotate(0) scale(1)}}