/* The dice stage on the roller (src/scripts/dice-overlay.js).

   The toggle borrows the speaker's disc (.sound-toggle in diceroller.css):
   dimmed when off, full when on. Only its icon differs.

   Colours only through theme tokens: lintColours() in build.js fails the build
   on a literal. */

#dice-roller-header .dice-toggle .dice-ico {
    -webkit-mask-image: url("/assets/icons/d20.svg");
            mask-image: url("/assets/icons/d20.svg");
}

/* The stage covers the whole window and takes no clicks until dice are on it,
   so an idle stage never eats a click meant for the page. While dice are on it
   the clicks are its own: a click clears them, a drag walks round the table. */
#dice-stage {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 100000;
    background: transparent;
    pointer-events: none;
    color-scheme: normal;
}

#dice-stage.dice-stage-live {
    pointer-events: auto;
}

/* Whose roll it is, at the very top edge, while the dice are up in a share
   (dice-overlay.js). A tab hanging from the top of the screen, above the
   stage, taking no clicks. */
#dice-stage-roller {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100001;
    max-width: calc(100% - 32px);
    margin: 0;
    padding: 6px 18px 7px;
    border-radius: 0 0 12px 12px;
    background-color: var(--theme-primary-bg);
    color: var(--text-on-accent);   /* not --text-footer: grey on night, 2.2 (site-settings.css) */
    font: 700 15px/1.2 system-ui, -apple-system, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}