:root{--primary-color: #B0816D;--secondary-color: #204d59;--warning-color: #a11515;--white-color:rgba(226, 226, 228, 1);--primary-background:rgba(255, 255, 255, 1);--secondary-background:white;--primary-shadow: 0 0 0 .8px #592c20;--secondary-shadow: 0 0 0 .8px #592c20;--element-shadow: 0 0 0 .6px rgba(0, 0, 0, .4);--component-shadow: 0 0 2px .1px rgba(0, 0, 0, .2)}html,body{margin:0;padding:0;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif}.center{left:50%;top:50%;transform:translate(-50%,-50%)}.center-text{text-align:center}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.horizontal-center{left:50%;transform:translate(-50%)}.h3{color:#0009}.inline{display:inline}.button{background:var(--primary-background);border:none;outline:none;cursor:pointer;font-size:16px;color:#0009;padding:.6em;border-radius:.5em;box-shadow:var(--element-shadow);transition:.2s;-webkit-tap-highlight-color:transparent}.button:hover{color:#fff;background:var(--primary-color)}.icon{cursor:pointer;transition:.2s}.icon:hover{color:var(--primary-color)}.input{width:100%;font-size:12px;border:none;outline:none;padding:.4em;border-radius:.5em;color:#000c;box-shadow:var(--element-shadow);transition:.2s}.input:focus{box-shadow:var(--primary-shadow)}.app{width:100%;height:100%}.game-menu{width:30vw;padding:2em;min-width:15em;min-height:15em;max-width:30em;max-height:30em;box-sizing:border-box}.game-menu__button{width:100%;margin:.5em 0}.join-popup__button{position:absolute;bottom:2em}:root{--notification-final-opacity:.7 }.notification{position:fixed;display:flex;justify-content:center;align-items:center;width:200px;z-index:6;background:var(--secondary-color);color:var(--white-color);padding:.5em;font-size:16px;border-radius:1em;font-weight:500;animation:show-notification .4s;opacity:var(--notification-final-opacity)}@keyframes show-notification{0%{opacity:0}to{opacity:var(--notification-final-opacity)}}:root{--table-width: 90vw;--table-max-width: 60vh;--table-gap:.3em }.game{min-height:100%}.table{display:flex;flex-wrap:wrap;width:var(--table-width);max-width:var(--table-max-width);gap:.3em;margin-bottom:2em}.table__spot{flex:0 0 calc(33.333333% - var(--table-gap));box-sizing:border-box;height:calc(var(--table-width) / 3 - var(--table-gap));max-height:calc(var(--table-max-width) / 3 - var(--table-gap))}.table__spot:hover>i>svg{fill:#fff}.id-display{margin:1em 0 3em}.id-display__h3{margin-right:1em}.symbol-display__symbol{display:inline-block;margin-left:.3em;width:2em;height:2em}.symbol-display{display:flex;justify-content:center;align-items:center}.id-display__notification{position:fixed;bottom:2em}@media (width > 500px){:root{--table-width: 50vw}}@media (width < 1000px){.game{width:var(--table-width);max-width:var(--table-max-width)}}@media (width > 1000px){.id-display{margin-left:1em}}:root{--custom-x-width:100%;--animation-component-final-position: translateY(120%)}.custom-o{position:relative;display:inline-flex;justify-content:center;align-items:center;width:var(--custom-x-width);height:var(--custom-x-width);overflow:hidden;background-color:inherit}.custom-o:after{width:100%;background-color:var(--primary-background);content:"";position:absolute;bottom:0;left:0;background-color:inherit;animation:custom-x-animation .6s}.custom-o:hover:after{transition:0s;background-color:var(--primary-color)}@keyframes custom-o-animation{0%{transform:translateY(0)}to{transform:var(--animation-component-final-position)}}.custom-o__svg{width:80%;height:80%;fill:var(--primary-color)}:root{--custom-x-width: 100%}.custom-x{position:relative;display:inline-flex;justify-content:center;align-items:center;width:var(--custom-x-width);height:var(--custom-x-width);overflow:hidden;background-color:inherit}.custom-x:after{width:100%;background-color:var(--primary-background);content:"";position:absolute;bottom:0;left:0;background-color:inherit;animation:custom-x-animation .6s}@keyframes custom-x-animation{0%{height:100%}to{height:0%}}.custom-x__svg{width:100%;height:100%;fill:var(--primary-color)}:root{--custom-stripe-height: .6em;--stripe-horizontal-transform: translate(calc(var(--table-gap)), -50%);--stripe-vertical-transform: translateY(-50%) rotate(90deg);--stripe-diagonal-align: translateX(0)}.custom-stripe{background-color:var(--warning-color);position:absolute;height:var(--custom-stripe-height);pointer-events:none;transform-origin:0 50%;z-index:10}.stripe-direction_flat{width:calc(var(--table-width) - 3*var(--table-gap));max-width:calc(var(--table-max-width) - 3*var(--table-gap));animation:custom-stripe-stetch_flat .4s}.stripe-direction_diagonal{width:calc(var(--table-width)*1.414);max-width:calc((var(--table-max-width) - .9em) * 1.414);animation:custom-stripe-stetch_diagonal .4s}.pattern-1{top:calc(16.66666% - var(--table-gap)/2);transform:var(--stripe-horizontal-transform)}.pattern-2{top:50%;transform:var(--stripe-horizontal-transform)}.pattern-3{top:calc(83.333333% + var(--table-gap)/2);transform:var(--stripe-horizontal-transform)}.pattern-4{top:var(--table-gap);left:calc(16.66666% - var(--table-gap)/2);transform:var(--stripe-vertical-transform)}.pattern-5{top:var(--table-gap);left:calc(50% - var(--table-gap)/2);transform:var(--stripe-vertical-transform)}.pattern-6{top:var(--table-gap);left:calc(83.333333% - var(--table-gap)/2);transform:var(--stripe-vertical-transform)}.pattern-7{left:calc(var(--table-gap));transform:var(--stripe-diagonal-align) rotate(45deg)}.pattern-8{top:calc(100% - 2*var(--table-gap));left:var(--table-gap);transform:var(--stripe-diagonal-align) rotate(-45deg)}@keyframes custom-stripe-stetch_flat{0%{width:0}to{width:calc(var(--table-width) - 3*var(--table-gap))}}@keyframes custom-stripe-stetch_diagonal{0%{width:0}to{width:calc(var(--table-width)*1.414)}}.popup{width:30vw;height:30vw;border-radius:2em;padding:2em;min-width:15em;min-height:15em;max-width:30em;max-height:30em;box-sizing:border-box;box-shadow:var(--component-shadow);background-color:var(--primary-background)}.popup_close-icon{position:absolute;right:.5em;top:.5em}