*{margin:0;padding:0}html,body{height:100%;font-family:system-ui,sans-serif;overflow:hidden}body{background-image:url(../textures/bacc.png);background-position:50%;background-size:100% 100%}#hud{z-index:10;pointer-events:none;color:#fff;text-shadow:-1px -1px #000,1px -1px #000,-1px 1px #000,1px 1px #000;width:100%;height:100%;position:fixed;top:0;left:0}#hud.hidden{display:none}@font-face{font-family:Arabico;src:url(../fonts/Arabico.otf)}#menu{color:#fff200;z-index:20;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.25em;display:flex;position:fixed}#menu.hidden{display:none}#menu h1{color:#fff200;-webkit-text-stroke:.1px black;background:linear-gradient(#ce1126 0% 33%,#fff 33% 66%,#000 66% 100%);margin-bottom:-2px;font-family:Arabico;font-size:6em}#start-button{cursor:pointer;background-color:#fff200;border:none;border-radius:25px;width:200px;margin-top:100px;padding:10px 20px;font-size:1.5em}#game-canvas{z-index:0;display:block;position:fixed;top:0;left:0}#start-button:hover:enabled{background-color:#5fdc65}#start-button:disabled{cursor:default;background-color:gray}#topper{color:#fff200;justify-content:center;gap:38px;padding:12px;font-size:1.8em;font-weight:700;display:flex}#order{background-color:#00000050;border-radius:15px;min-width:230px;padding:15px 20px;position:fixed;top:75px;left:25px}#order h3{color:#fff200;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;font-size:1em}#order-list{list-style:none}#order-list li{opacity:.5;justify-content:space-between;gap:16px;padding:3px 0;font-size:1em;display:flex}#order-list li.active{color:#ffff00f7}#order-list li.inband{color:#90ee90b8}#order-list li.done{color:#006400fc}#order-list li.bad{color:#ff0000fd}#order-list li.short{color:#ffa600fd}#instructions{text-align:center;opacity:.86;width:100%;font-size:1em;position:absolute;bottom:28px}#result{z-index:100;text-align:center;color:#fff;background:#000c;border-radius:15px;padding:30px 45px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}#result.hidden{display:none}#result h2{color:#ff0;margin-bottom:10px;font-size:2.5em}#result p{margin-bottom:20px;font-size:1em}#next-button{cursor:pointer;background:#ff0;border:none;border-radius:22px;padding:10px 30px;font-size:1em}#next-button:hover{background:#0f0}#pourbar{width:min(560px,70vw);position:absolute;bottom:70px;left:50%;transform:translate(-50%)}#pourbar.hidden{display:none}#pourtrack{background-color:#000000b6;border:2px solid #000000e0;border-radius:10px;height:22px;position:relative;overflow:hidden}#pourhead{color:#ff0;justify-content:space-between;margin-bottom:5px;font-size:1.1em;font-weight:700;display:flex}#pourmark{background-color:#fff;width:3px;margin-left:-1.5px;position:absolute;top:-3px;bottom:-3px;box-shadow:0 0 4px #000}#pourband{background-color:#78ff7845;position:absolute;top:0;bottom:0}#pourfill{background-color:#ff0;border-radius:10px 0 0 10px;width:0%;position:absolute;top:0;bottom:0;left:0}#result{pointer-events:auto}#pourfill.good{background-color:#5fdc65}#pourfill.over{background-color:red}