body{display:flex;flex-direction:column;margin:0}*{box-sizing:border-box}#menu-toggle{align-items:center;background:linear-gradient(135px,#6e8efb,#a777e3);border:none;border-radius:10%;box-shadow:0 4px 15px rgba(5,8,86,.329);cursor:pointer;display:flex;height:50px;justify-content:center;left:20px;position:fixed;top:20px;transition:all .3s ease;width:50px;z-index:1000}#menu-toggle:hover{box-shadow:0 6px 20px rgba(0,0,0,.3);transform:scale(1.1)}#menu-toggle:active{transform:scale(.95)}.hamburger{display:flex;flex-direction:column;height:20px;justify-content:space-between;width:25px}.hamburger span{background-color:#000;border-radius:3px;display:block;height:3px;transition:all .3s ease;width:100%}#menu-toggle.active .hamburger span:first-child{transform:translateY(8.5px) rotate(45deg)}#menu-toggle.active .hamburger span:nth-child(2){opacity:0}#menu-toggle.active .hamburger span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}.closed{transform:translateX(-100%);transition:transform .3s ease-in-out}.header{background-color:#fff;display:flex;font-family:Inter,sans-serif;gap:2rem;padding:1.5rem}#mobile-header{flex-direction:column;height:100%;padding-top:100px;position:absolute;width:18rem;z-index:999}#desktop-header{align-items:center;align-self:center;display:none;flex-direction:row;height:4rem;width:100%}.open{transform:translateX(0)}.header a{color:#333;font-size:1rem;font-weight:500;position:relative;text-decoration:none;transition:color .3s ease}.header a:after{background-color:#007bff;bottom:-4px;content:"";height:2px;left:0;position:absolute;transition:width .3s ease;width:0}.header a:hover{color:#007bff}.header a:hover:after{width:100%}.header a:first-child{color:#007bff;font-size:1.4rem;font-weight:800;letter-spacing:-.02em;margin-right:auto}.header a:first-child:after{display:none}.header a:first-child:hover{opacity:.8;transform:scale(1.05);transition:transform .2s ease}.u-hidden{display:none!important}.u-flex-row{display:flex;flex-direction:row}.u-flex-col{display:flex;flex-direction:column}@media (min-width:1024px){#mobile-header{display:none}#desktop-header{display:flex}#menu-toggle{display:none}}@media (min-width:1368px){#desktop-header{width:80%}@media (min-aspect-ratio:2/1){.main-content{width:60%}}}body{height:100vh;width:100vw}#js-spades-game-view{position:relative}#js-spades-game-view-canvas{position:absolute}.u-flex-eq{flex:1 1 0}:root{--control-block-shadow:0.4rem 0.4rem 0.4rem rgba(0,0,0,.6);--def-color:#000;--def-background-color:#f4f4f4;--highlight-background-color:#6668e3;--highlight-color:#fff;--btn-radius:0.25rem}#js-dialog-root{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.dialog{background-color:var(--def-background-color);border:1px solid #ddd;box-shadow:var(--control-block-shadow);display:flex;flex-direction:column;gap:1.5rem;padding:2rem}.form__group{align-items:center;display:flex;justify-content:space-between}.form__label{flex:1;font-weight:700;margin-right:1.5rem}.form__input{flex:2;padding:.6rem}.form__input[type=text]{border:1px solid #ccc;border-radius:4px}.form__input[type=checkbox]{flex:none}.form__input[type=range]{margin-left:1rem}input[type=submit]:hover{background-color:#4cae4c}.form__group--okcancel{justify-content:right;margin-top:1rem}.form__cancel,.form__ok{height:2rem;margin-left:2rem;width:7rem}#js-settings{width:26rem}#js-score-editor{width:24rem}.partnership{align-items:center;color:#fff;display:flex;font-size:var(--dialog-font-size);height:4rem;justify-content:center;margin-right:2rem;width:5rem}.partnership--ns{background-color:red}.partnership--ew{background-color:blue}#js-player-editor{width:30rem}.form__input--bids{display:flex;flex-direction:column}.bid-btn{background-color:#a6c4e5;border:none;border-radius:var(--btn-radius);color:#000;cursor:pointer;flex-basis:0;flex-grow:1;font-size:1.5rem;height:3rem;margin:.2rem}.bid-btn--sel,.bid-btn:hover{background-color:var(--highlight-background-color);color:var(--highlight-color)}.ui-block,.ui-block__img-btn{background-color:var(--def-background-color);display:flex}.ui-block__img-btn{align-items:center;border:0;border-radius:var(--btn-radius);color:var(--def-color);flex:1 1 0px;flex-direction:column;font-size:.8rem;height:3rem;justify-content:center;outline:none;padding-bottom:.4rem;padding-top:.4rem}.ui-block__img-btn:focus:not(:focus-visible){outline:none}.ui-block__img-btn:hover:enabled{background-color:var(--highlight-background-color);color:var(--highlight-color)}.ui-block__img-btn:disabled{color:gray}.ui-block__btn{background-color:var(--def-background-color);border:0;border-radius:var(--btn-radius);color:var(--def-color);display:flex;flex:1 1 0px;padding-bottom:.5rem;padding-top:.5rem;text-align:left}.ui-block__btn-btn:focus:not(:focus-visible){outline:none}.ui-block__btn:disabled{color:gray}.ui-block__btn:hover:enabled{background-color:var(--highlight-background-color);color:var(--highlight-color)}.ui-block__img-btn .u-checked{display:block}.ui-block__img-btn__text{display:none}.main-content{align-self:center;display:flex;flex-direction:column;justify-content:center;width:100%}#js-spades-game-view{height:100vw;height:100svw;width:100vw;width:100svw}#js-spades-game-view-controls{align-items:start;display:grid;gap:.1rem;grid-template-columns:1fr}@media (min-aspect-ratio:1/1){#js-spades-game-view{height:100vh;height:100svh;width:100vh;width:100svh}@media (min-aspect-ratio:5404319552844595/4503599627370496){.main-content{flex-direction:row}#js-spades-game-view-controls{align-self:flex-start;flex-grow:1}@media (min-aspect-ratio:7/4){#js-spades-game-view-controls{grid-template-columns:1fr 1fr}}}@media (min-width:1024px){#js-spades-game-view{height:calc(100vh - 4rem);height:calc(100svh - 4rem);width:calc(100vh - 4rem);width:calc(100svh - 4rem)}.ui-block__btn{font-size:larger}}@media (min-width:1368px){.main-content{width:80%}#js-spades-game-view{height:calc(100vh - 8rem);height:calc(100svh - 8rem);width:calc(100vh - 8rem);width:calc(100svh - 8rem)}#js-spades-game-view-controls{gap:2rem;grid-template-columns:1fr;max-width:26rem}.ui-block{box-shadow:var(--control-block-shadow);padding:.4rem}.ui-block__img-btn{height:4rem}.ui-block__img-btn__text{display:block}@media (min-aspect-ratio:2/1){.main-content{width:60%}}}}@media not (min-aspect-ratio:1/1){@media (min-width:384px){#js-spades-game-view-controls{grid-template-columns:1fr 1fr}}@media (min-height:912px){.ui-block__img-btn{height:4rem}.ui-block__btn{font-size:larger}}}