:root{--panel:#000;--panel-border:#282828;--green:#139b13;--green-hover:#18be18;--green-shadow:#0a5a0a;--button:#efefef;--button-hover:#d6d6d6;--button-shadow:#8a8a8a;--gold:#e3e100}[hidden]{display:none!important}html,body,button{font-family:Pixelify Sans,sans-serif;overflow:hidden}body{text-align:center;color:#f0f8ff;background-color:#000;background-image:url(/images/wallpaper.webp);background-position:50%;background-repeat:no-repeat;background-size:contain;place-content:center;align-items:center;height:100vh;margin:0;padding:0;display:grid}body.in-game{background-color:#282828;background-image:none}.start-screen{flex-direction:column;align-items:center;display:flex;position:relative}#demo-canvas{z-index:-1;opacity:.85;pointer-events:none;border:10px double #000;border-radius:20px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 40px #000c}body.in-game #demo-canvas{display:none}.title{font-optical-sizing:auto;text-shadow:4px 4px #000,-2px -2px #000,2px -2px #000,-2px 2px #000;margin:0 0 1.5rem;font-family:Pixelify Sans,sans-serif;font-size:clamp(2.5rem,min(9vh,11vw),5rem);font-style:normal;font-weight:700}.letter{margin:0 .12em;animation:2.4s ease-in-out infinite bob;display:inline-block}.letter:first-child{color:red;animation-delay:0s}.letter:nth-child(2){color:orange;animation-delay:.15s}.letter:nth-child(3){color:#ff0;animation-delay:.3s}.letter:nth-child(4){color:green;animation-delay:.45s}.letter:nth-child(5){color:#00f;animation-delay:.6s}.letter:nth-child(6){color:#93f;animation-delay:.75s}@keyframes bob{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.12em)}}.press-start{letter-spacing:.1em;text-shadow:2px 2px #000;margin:1.25rem 0 0;font-size:1.1rem;animation:1.2s steps(2,start) infinite blink}@keyframes blink{to{visibility:hidden}}@media (prefers-reduced-motion:reduce){.letter,.press-start{animation:none}}#background-video{z-index:-1;min-width:100%;min-height:100%;display:none;position:fixed;bottom:0;right:0}body.in-game #background-video{display:block}canvas{margin:0 auto;display:block}.game-view{grid-template-columns:auto auto auto;gap:3rem;display:grid}.game-canvas{position:relative}#board-canvas{border:10px double #000;border-radius:20px}#next-canvas,#hold-canvas{border:10px double #000;border-radius:10px}.countdown{color:#fff;text-shadow:4px 4px #000;pointer-events:none;place-items:center;font-size:5rem;font-weight:700;display:grid;position:absolute;inset:0}.menu{background-color:var(--panel);border:4px solid var(--panel-border);text-align:center;border-radius:20px;min-width:17rem;padding-top:.5rem;overflow:hidden;box-shadow:0 0 0 4px #000,0 12px 30px #0009}.menuButton{box-sizing:border-box;color:#000;background-color:var(--button);cursor:pointer;width:80%;min-width:10rem;box-shadow:0 4px 0 var(--button-shadow);border:none;border-radius:20px;margin:1rem 10%;padding:1rem;font-weight:700;transition:transform 50ms,box-shadow 50ms,background-color .15s;display:block}.menuButton:hover{background-color:var(--button-hover)}.menuButton:active{box-shadow:0 1px 0 var(--button-shadow);transform:translateY(3px)}.menuButton:focus-visible,.key-button:focus-visible,.close:focus-visible{outline-offset:3px;outline:3px solid #fff}.menuButton:disabled{cursor:wait;opacity:.8}.play{color:#fff;background-color:var(--green);box-shadow:0 4px 0 var(--green-shadow);font-size:1.3rem;font-weight:700}.play:hover{background-color:var(--green-hover)}.play:active{box-shadow:0 1px 0 var(--green-shadow)}table{text-align:center;border-spacing:0;background-color:#000;border-radius:20px;min-width:100%}thead th{background-color:#000;padding:.5rem 0 .25rem}tr{background-color:var(--panel-border);width:80vw}tr:nth-child(2n){background-color:#000}td{padding:.2rem .75rem}#score-table .rank{text-align:left;color:#aaa;width:3rem}#score-table td:last-child{text-align:right}#score-table tbody tr:first-child td{color:var(--gold)}.confirmContainer{column-span:2;text-align:center}.confirmContainer button{width:auto;margin:1rem .5rem 0;display:inline-block}.controls-table td:first-child{padding-right:1.5rem}.key-slots{gap:.5rem;display:flex}.key-button{color:#fff;cursor:pointer;background:#000;border:2px solid #555;border-radius:8px;min-width:7rem;padding:.2rem .5rem;font-family:Courier New,Courier,monospace;font-size:1.1rem;font-weight:700}.key-button:hover{border-color:#fff}.key-button.empty{color:#666}.key-button.waiting{color:#000;background:var(--gold);border-color:var(--gold);font-family:Pixelify Sans,sans-serif;font-size:.85rem;animation:.8s steps(2,start) infinite blink}.hint{color:#aaa;margin:0 0 .5rem;font-size:.85rem}#controls-reset{width:auto;margin:.5rem auto 0;display:inline-block}.modal{z-index:1;background-color:#00000080;position:fixed;inset:0;overflow:hidden}.modal-content{border:4px solid var(--panel-border);white-space:nowrap;background-color:#000;border-radius:20px;width:fit-content;margin:12vh auto 0;padding:20px;box-shadow:0 0 0 4px #000}.modal-content section>div,.modal-content section>table,.modal-content form{text-align:left;padding:20px;line-height:2}.modal-content h2{margin-top:0;padding:20px 20px 0}.close{color:#aaa;float:right;background:0 0;border:none;padding:0;font-size:28px;font-weight:700;line-height:1}.close:hover,.close:focus{color:#dc143c;cursor:pointer;text-decoration:none}#wrapper{flex-direction:column;justify-content:center;align-items:center;display:flex}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-2px)}50%{transform:translate(2px)}75%{transform:translate(-2px)}to{transform:translate(0)}}.shake{animation:.5s ease-in-out shake}.fade-text{color:#fff;white-space:pre-line;pointer-events:none;opacity:0;background-color:#000000b3;border-radius:5px;padding:10px;transition:opacity 1s ease-in-out;position:fixed;bottom:30vh;left:30vw}.touch-note{color:#aaa;padding:0 1rem;display:none}@media (hover:none) and (pointer:coarse){.touch-note{display:block}.press-start{display:none}}.start-screen,#demo-canvas{transition:opacity .3s ease-in,visibility .3s}body.loading .start-screen,body.loading #demo-canvas{opacity:0;visibility:hidden}