:root{--bodyBg: #e6e9f3;--boardColor: #f0f0f3;--titleColor: #808fa6;--tileBgcolor: #e0e0e7;--tileShadowBgColor: #e4e4ec;--neutralTileColor: #535963;--linkColor: #8590a5;--exactTileColor: #33aa88;--fadedGray: #a5abb5;--sameRowTileColor: #eea655;--clockColor: #7a99b3;--modalBgColor: #f0f0f3;--modalBorderColor: #fff}@media(prefers-color-scheme:dark){:root{--bodyBg: #131a1f;--boardColor: #111213;--titleColor: #859198;--tileBgcolor: #111213;--tileShadowBgColor: #e4e4ec;--neutralTileColor: #e3e9e3;--linkColor: #859198;--exactTileColor: #33aa88;--fadedGray: #a5abb5;--sameRowTileColor: #eea655;--clockColor: #111213;--modalBgColor: #22232e;--modalBorderColor: #333340}}*{margin:0;padding:0}html{height:100%;font-size:18px;box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{font-family:Nunito,sans-serif;background:var(--bodyBg);height:100%}#root{height:100%}.mouse-only,.touch-only{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(pointer:fine){.mouse-only{display:block}}@media(pointer:coarse){.touch-only{display:block}}.container{width:min(100%,600px);margin:0 auto;height:100%;display:grid;grid-template-rows:4rem 1fr 4rem}header{display:flex;padding:2rem .5rem;justify-content:space-between;align-items:center;border-bottom:1px solid rgb(0 0 0 /5%)}h1{display:flex;align-items:center;color:var(--titleColor);font-size:1.2rem;line-height:2rem}h1 img{margin-right:.25rem}h2{color:#909fa0;font-size:1rem;margin-left:1rem;margin-top:3px}nav{display:flex;justify-content:space-between;align-items:center;padding:0 1rem;flex:1}nav ul{list-style:none;display:flex;align-items:center;padding:0;margin:0;flex:1;margin-right:-1rem}nav ul li{color:var(--neutralTileColor)}nav ul li+li{margin-left:.5rem}nav ul li a,nav ul li span{font-weight:700;font-size:.8rem;display:block;padding:.15rem .5rem;color:inherit;text-transform:uppercase;letter-spacing:2px}nav ul li:last-child{margin-left:auto}nav ul li span{color:var(--bodyBg);background:var(--titleColor);border-radius:6px;box-shadow:0 2px #0000c81a}nav ul li a.lang{color:var(--exactTileColor);text-decoration:none;background:var(--tileBgcolor);border-radius:6px;box-shadow:0 2px #0000c81a}nav ul li a svg,nav ul li button svg{color:var(--exactTileColor);width:1rem}.board{margin-top:2rem;border-radius:1rem}#canvas-container{margin:0 auto;text-align:center}#clock{border-radius:1rem;width:min-content;display:flex;margin:0 auto;padding:.5rem 1rem;background-color:var(--clockColor);color:#fff;font-weight:600;justify-content:center;align-items:center;margin-top:2rem;font-size:small;letter-spacing:.15rem;text-shadow:0 -2px 0 rgba(0,0,0,.15);box-shadow:0 4px #00000012;opacity:.5}canvas{margin:0 auto;background:var(--boardColor);padding:5px 5px 8px;border-radius:12px;box-shadow:0 1px 5px #30305015,5px 15px 30px #30305010,-5px 15px 30px #30305010}.modal-overlay{background:#00000026;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;position:fixed;left:0;top:0;right:0;bottom:0;z-index:100;animation:fadeIn .3s ease-in-out}footer{border-top:1px solid rgb(0 0 0 /5%);color:var(--neutralTileColor);font-size:medium;display:flex;align-items:center;justify-content:space-between}footer>div{padding:1rem}footer a{color:var(--linkColor)}footer a:visited{color:var(--linkColor)}.modal{box-shadow:0 0 10px #99999938,0 15px 20px #a2c7d247;max-width:min(420px,calc(100% - 2rem));background:var(--modalBgColor);padding:1rem;border-radius:1rem;color:var(--neutralTileColor);border:1px solid var(--modalBorderColor);line-height:1.5rem;animation:fadeIn .3s ease-in-out}.modal .close-modal{display:block;background:#34aa89c7;padding:.5rem 1rem;border-radius:.25rem;color:var(--boardColor);text-decoration:none;margin:0 auto;text-align:center;font-weight:600;text-shadow:0 -2px 0 rgba(0,0,0,.1);box-shadow:0 4px #00000012}.modal .key{border-radius:3px;color:var(--fadedGray);background:var(--tileBgcolor);display:inline-block;padding:.25rem .5rem;margin-bottom:-.25rem;width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center}.modal .hl{border-radius:3px;display:inline-block;margin-bottom:-.5rem;position:relative;z-index:100;background:var(--tileBgcolor);padding:.125rem .5rem}.modal .green{color:var(--exactTileColor)}.modal .yellow{color:var(--sameRowTileColor)}.modal article h3{text-align:center;letter-spacing:.1rem;text-transform:uppercase;font-size:1.2rem;line-height:2rem;margin-bottom:1rem;color:var(--exactTileColor)}.modal article ul{list-style:none}.modal article ul>*+*{margin-top:1rem}.modal article ul li{margin-bottom:1rem;position:relative;padding-top:1rem;border-top:1px solid var(--modalBorderColor)}.modal .buttons{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;border-top:1px solid #e0e0e7;padding-top:1rem}.modal .buttons button{all:unset;border-radius:.5rem;padding:.25rem 1rem;background:var(--neutralTileColor);color:var(--boardColor);font-weight:600;text-shadow:0 -2px 0 rgba(0,0,0,.1);box-shadow:0 4px #00000012;transition:all .15s ease-in-out}.modal .buttons button:hover,.modal .buttons button:focus{transform:translateY(-2px);box-shadow:0 6px #00000012;opacity:.9}.modal .buttons button:active{transform:translateY(2px);box-shadow:0 2px #00000012;opacity:.9}.modal .buttons button.primary{background:var(--exactTileColor)}#toast{position:fixed;bottom:0;left:0;right:0;z-index:9999;display:flex;justify-content:center;align-items:center;padding:.5rem;margin:.5rem;border-radius:.25rem;background:var(--boardColor);color:var(--exactTileColor);font-size:1.2rem;font-weight:600;text-shadow:0 -2px 0 rgba(0,0,0,.1);box-shadow:0 4px #00000012;transform:translateY(100%);transition:transform .5s ease-in-out}#toast.show{transform:translateY(0);transition:transform .3s ease-in-out}