.role-board{--gap:12px;--max:76px}.role-board[data-size=lg]{--max:96px}@media (max-width:639px){.role-board{--gap:8px}}.role-tile{--size:min(var(--max),calc((100vw - 2 * var(--pad) - (var(--n) - 1) * var(--gap)) / var(--n)));position:relative;width:var(--size);height:calc(var(--size) * 1.18);display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--ink);font-family:var(--font-display);font-size:calc(var(--size) * .5);font-weight:800;letter-spacing:-.02em;line-height:1;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;transition:transform .28s var(--ease-snap),background-color .25s ease,border-color .2s ease,color .25s ease,box-shadow .2s ease}.role-tile:is([data-state=idle],[data-state=placed]):hover{border-color:var(--ink)}.role-tile[data-state=placed]{background:var(--ink);border-color:var(--ink);color:var(--bg)}.role-tile[data-state=picked]{border-color:var(--accent);color:var(--accent);transform:translateY(-6px);box-shadow:0 12px 24px -14px var(--accent)}.role-tile[data-dragging]{z-index:2;cursor:grabbing;border-color:var(--accent);box-shadow:0 18px 30px -16px rgb(0 0 0/.45);transition:background-color .25s ease,border-color .2s ease,color .25s ease,box-shadow .2s ease}.role-tile[data-state=solved]{background:var(--red-hi);border-color:var(--red-hi);color:#fff;cursor:default}