:root{--face:silver;--light:#fff;--dark:gray;--ink:#000;font-family:Tahoma,Verdana,Segoe UI,sans-serif}html,body{background:var(--face);height:100%;margin:0;overflow:hidden}body{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;place-items:center;display:grid}#stage{--u:64px;--bevel:max(1px, calc(var(--u) * .03));position:relative}#under,#over{position:absolute;inset:0}#over{pointer-events:none}#scene{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.sunken{box-sizing:border-box;background:var(--face);border:var(--bevel) solid;border-color:var(--dark) var(--light) var(--light) var(--dark);position:absolute}.box{padding:0 calc(var(--u) * .14);font-size:calc(var(--u) * .28);white-space:nowrap;color:var(--ink);align-items:center;display:flex}.box b{margin-left:.35em}.button{box-sizing:border-box;font:bold calc(var(--u) * .3) / 1 Tahoma, Verdana, "Segoe UI", sans-serif;color:var(--ink);background:var(--face);border:var(--bevel) solid;border-color:var(--light) var(--dark) var(--dark) var(--light);outline:1px solid var(--ink);outline-offset:0;cursor:pointer;pointer-events:auto;padding:0;position:absolute}.button.pressed,.button:active{border-color:var(--dark) var(--light) var(--light) var(--dark)}.button:focus-visible{outline-width:2px}.dialog{box-sizing:border-box;padding:calc(var(--u) * .22) calc(var(--u) * .3) calc(var(--u) * .26);background:var(--face);border:var(--bevel) solid;border-color:var(--light) var(--dark) var(--dark) var(--light);outline:1px solid var(--ink);box-shadow:calc(var(--u) * .06) calc(var(--u) * .06) 0 #0000004d;text-align:center;color:var(--ink);pointer-events:auto;position:absolute;transform:translateY(-50%)}.dialog.hidden{display:none}.dialog-title{font-weight:700;font-size:calc(var(--u) * .36);margin-bottom:calc(var(--u) * .12)}.dialog-body p{margin:calc(var(--u) * .06) 0;font-size:calc(var(--u) * .24);line-height:1.35}.scores{margin-top:calc(var(--u) * .14);max-height:calc(var(--u) * 3.1);border:var(--bevel) solid;border-color:var(--dark) var(--light) var(--light) var(--dark);background:var(--light);font-size:calc(var(--u) * .22);text-align:left;overflow-y:auto}.scores[hidden]{display:none}.score-row{font-variant-numeric:tabular-nums;grid-template-columns:2em minmax(0,1fr) 5em 3.2em;gap:.6em;padding:.18em .5em;display:grid}.score-row span:nth-child(n+3){text-align:right}.score-row .player{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.score-row.head{background:var(--face);font-weight:700;position:sticky;top:0}.score-row.me{color:var(--light);background:navy}.score-empty{color:var(--dark);padding:.6em}.fields{gap:calc(var(--u) * .1);margin-top:calc(var(--u) * .14);justify-content:center;display:grid}.field{font-size:calc(var(--u) * .22);grid-template-columns:auto 9em;align-items:center;gap:.4em;display:grid}.field-label{text-align:right}.field[hidden]{display:none}.dialog-error{margin:calc(var(--u) * .12) 0 0;font-size:calc(var(--u) * .22);color:#c00000;line-height:1.35}.dialog-error[hidden]{display:none}.field-input{width:9em;font:inherit;color:var(--ink);background:var(--light);border:var(--bevel) solid;border-color:var(--dark) var(--light) var(--light) var(--dark);outline:none;padding:.15em .35em}.field-input:focus-visible{outline:1px dotted var(--ink)}.dialog-actions{justify-content:center;gap:0 calc(var(--u) * .16);flex-wrap:wrap;display:flex}.picker{justify-content:center;align-items:center;gap:calc(var(--u) * .12);margin-top:calc(var(--u) * .18);font-size:calc(var(--u) * .26);display:flex}.picker[hidden]{display:none}.picker-value{min-width:calc(var(--u) * .6);font-weight:700;font-size:calc(var(--u) * .34)}.dialog .picker .button{width:calc(var(--u) * .44);height:calc(var(--u) * .44);font-size:calc(var(--u) * .2);outline-width:1px;margin:0;padding:0}.button:disabled{color:var(--dark);cursor:default}.dialog .button{margin-top:calc(var(--u) * .2);padding:calc(var(--u) * .1) calc(var(--u) * .35);font-size:calc(var(--u) * .26);outline-width:2px;position:static}.popups{pointer-events:none;position:absolute;inset:0}.popup{font-weight:700;font-size:calc(var(--u) * .26);color:var(--ink);text-shadow:1px 1px 0 var(--light), -1px -1px 0 var(--light), 1px -1px 0 var(--light), -1px 1px 0 var(--light);animation:.9s ease-out forwards rise;position:absolute;transform:translate(-50%,-50%)}.popup.minus{color:#c00000}.popup.bonus{color:navy}.banner{z-index:1;padding:calc(var(--u) * .12) calc(var(--u) * .4);font-weight:700;font-size:calc(var(--u) * .3);white-space:nowrap;border:var(--bevel) solid;border-color:var(--light) var(--dark) var(--dark) var(--light);outline:1px solid var(--ink);box-shadow:calc(var(--u) * .06) calc(var(--u) * .06) 0 #0000004d;animation:3.6s ease-out forwards banner;position:absolute;transform:translate(-50%)}.banner.personal{color:var(--light);background:navy}.banner.top{color:var(--ink);background:#ffe14a}@keyframes banner{0%{opacity:0;translate:0 calc(var(--u) * -.5)}8%,85%{opacity:1;translate:0}to{opacity:0;translate:0}}@media (prefers-reduced-motion:reduce){.banner{animation-timing-function:step-end}}.popups.paused .popup,.popups.paused .banner{visibility:hidden;animation-play-state:paused}.button.cup svg{width:62%;height:62%;margin:auto;display:block}.button.pause:before,.button.pause:after{content:"";background:var(--ink);width:14%;height:44%;position:absolute;top:28%}.button.pause:before{left:31%}.button.pause:after{right:31%}.button.pause.paused:after{display:none}.button.pause.paused:before{border-style:solid;border-color:transparent transparent transparent var(--ink);border-width:calc(var(--u) * .12) 0 calc(var(--u) * .12) calc(var(--u) * .2);background:0 0;width:0;height:0;left:38%}@keyframes rise{0%{opacity:0;translate:0 calc(var(--u) * .1)}15%,70%{opacity:1}to{opacity:0;translate:0 calc(var(--u) * -.45)}}