@charset "UTF-8";#timerDropdown{right:0}#confetti{position:fixed;width:100dvw;height:100dvh;top:0;left:0;z-index:1000;pointer-events:none}main{display:flex;flex-direction:column;align-items:center;justify-content:center}main section{width:100%}main section#intro{text-align:center}main section#intro button{text-transform:uppercase;margin-top:1rem}main dialog{text-align:center}main dialog#rulesDialog button,main dialog#endDialog button{width:100%;text-align:center}main dialog#rulesDialog{text-align:inherit}main dialog#startDialog{--table-border-color: transparent}main dialog#startDialog :not(fieldset)>label,main dialog#startDialog legend{font-weight:700;margin-bottom:.25em}main dialog#startDialog fieldset{margin-block:1.5rem}main dialog#startDialog legend{width:100%}main dialog#startDialog table{margin-top:.5rem}main dialog#startDialog input:not([type=checkbox]):not(:placeholder-shown):valid{--form-border-color: var(--color-success) }main dialog#startDialog input:not([type=checkbox]):not(:placeholder-shown):invalid{--form-border-color: var(--color-error) }main dialog#startDialog .player{position:relative;border:1px solid var(--color-secondary);padding:1rem;margin-block:2rem}main dialog#startDialog .player h2{margin-top:-1rem;margin-bottom:1rem;margin-inline:-1rem;padding:1rem;background-color:var(--color-secondary);color:#fff;text-transform:uppercase}main dialog#endDialog .player{margin-block:1.5rem}main #buttons{padding-block:var(--game-spacing-block);border-top:1px solid var(--color-secondary);border-bottom:1px solid var(--color-secondary);display:flex;justify-content:space-between;gap:1rem}main #buttons>*{width:100%;text-align:center;white-space:nowrap}main #buttons #serialButton{color:var(--button-color, var(--color-font));background-color:var(--button-background, transparent);border:var(--button-border-size, var(--border-size)) var(--button-border-style, var(--border-style)) var(--button-border-color, transparent);border-radius:var(--button-border-radius, var(--border-radius));padding:var(--button-padding-block, var(--padding-block)) var(--button-padding-inline, var(--padding-inline));display:inline-block}main #buttons #serialButton.outline{color:var(--button-background, var(--color-font));background-color:transparent;border-color:currentColor}main #buttons #serialButton.primary{--button-color: var(--color-primary-contrast, white);--button-background: var(--color-primary);--button-border-color: var(--color-primary)}main #buttons #serialButton.secondary{--button-color: var(--color-secondary-contrast, white);--button-background: var(--color-secondary);--button-border-color: var(--color-secondary)}main #buttons #serialButton.thirdary{--button-color: var(--color-thirdary-contrast, white);--button-background: var(--color-thirdary);--button-border-color: var(--color-thirdary)}main #buttons #serialButton.success{--button-color: var(--color-success-contrast, white);--button-background: var(--color-success);--button-border-color: var(--color-success)}main #buttons #serialButton.error{--button-color: var(--color-error-contrast, white);--button-background: var(--color-error);--button-border-color: var(--color-error)}main #buttons #serialButton.warning{--button-color: var(--color-warning-contrast, white);--button-background: var(--color-warning);--button-border-color: var(--color-warning)}main #buttons #tokenButton:before{content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/></svg>');display:inline-block;width:1em;height:1em;vertical-align:-.125em;margin-right:.25rem}main #buttons #tokenButton:after{display:inline;content:attr(data-label)}main #buttons #tokenButton[data-drawing=true]:before{content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="M5 6.25a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0zm3.5 0a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0z"/></svg>')}main #buttons #tokenButton[data-drawing=true]:after{content:attr(data-end-label)}main #buttons #tokenButton[data-drawing=false]:before{content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445"/></svg>')}main #buttons #tokenButton[data-drawing=false]:after{content:attr(data-start-label)}main #players,main #results{container-type:inline-size}main #players{--grid-columns: 2;--grid-gap-inline: 2rem;--grid-gap-block: var(--game-spacing-block);padding-block:var(--game-spacing-block);border-bottom:1px solid var(--color-secondary)}main #tokens{--grid-columns: 6;--grid-gap-block: .75rem;--grid-gap-inline: .75rem;padding-block:var(--game-spacing-block)}main #tokens .token{width:100%;padding-bottom:100%;background-color:var(--color-secondary-light);border-radius:50%;position:relative;color:#fff;font-size:1.75rem;transition:background .3s ease-out}main #tokens .token[data-token]{background-color:var(--color-secondary)}main #tokens .token:after{content:attr(data-token);line-height:.2;position:absolute;top:53%;left:50%;transform:translate(-50%,-50%)}main .player h2{margin:0}main .player table{margin-block:1rem}main .player table tr.win td{background-color:var(--color-thirdary);color:#fff}main .player table td{border:1px solid var(--table-border-color);color:var(--color-primary);text-align:center}main .player table td.out{background-color:var(--color-secondary-light)}main .player div{color:var(--color-secondary)}main .player div .win{color:var(--color-thirdary)}@container (min-width: 360px) and (max-width:790px){main .player{display:grid;gap:1rem;grid-template-areas:"caption caption" "grid score"}main .player h2{grid-area:caption;text-align:left;margin-top:.5em}main .player div{align-self:center}main .player table{margin-block:0}}@media (max-width: 576px){main #buttons{--button-padding-inline: .5em;flex-wrap:wrap}main #buttons>*{width:calc(50% - .5rem)}main #buttons #serialButton{width:100%}main #startDialog{--table-padding-inline: .25rem;--table-padding-block: .25rem;--form-padding-inline: .125rem;--form-padding-block: .25rem}main #tokens{--grid-gap-block: .25rem;--grid-gap-inline: .25rem}main #tokens .token{font-size:1.5rem}}@media (max-width: 768px){main #players{--grid-columns: 1}}@media (min-width: 576px) and (max-width: 768px){main #tokens{--grid-columns: 9}}@media (min-width: 768px) and (max-width: 992px){main #tokens{--grid-columns: 12}}@media (min-width: 992px){main #tokens{--grid-columns: 15}}