/* Snakes and Ladders only. Everything else comes from ../shared/game.css. */
#screen{touch-action:manipulation;user-select:none;-webkit-user-select:none}
canvas#world{cursor:pointer}
canvas#world:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* the dice bar under the board: one ROLL button, or the two dice to pick from (their colours match the board markers) */
.sl-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sl-bar #rollBtn{grid-column:1/-1}
.sl-bar .tool{padding:14px 6px;font-size:13px;letter-spacing:.03em}
.sl-bar .tool[hidden]{display:none}
.sl-bar .tool:disabled{opacity:.55;cursor:default}
.sl-bar #rollBtn:not(:disabled){border-color:var(--mogi);color:var(--mogi)}
.sl-bar .die-a{border-color:#ff7a59}
.sl-bar .die-b{border-color:#8f6bff}
/* the bar fills square by square: meadow green to sunny gold */
.progress-fill{background:linear-gradient(90deg,#5ad25a,#9be38a,#ffd84a);transition:width .25s ease-out}
@media (max-width:560px){.sl-bar .tool{padding:12px 4px;font-size:12px}}