:root{--scale-mobile:0.6;--mobile-radius:0.6em}*{box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}body,html{margin:0;overscroll-behavior:none;padding:0;-webkit-touch-callout:none}body{background:#235a30 url(../img/bg_green.jpg);color:#fff;font-family:sans-serif;min-width:350px}body.wood{background:#553617 url(../img/bg_wood.jpg);background-position:50%;background-size:cover}body.stone{background:#9a9a9a url(../img/bg_stone.jpg);background-position:50%;background-size:cover}h2{font-size:1.2em;margin-top:0}a{color:#fff}a:hover{text-decoration:none}ul{list-style-type:none}li,ul{margin:0;padding:0}button{cursor:pointer}button,button.card{appearance:none;-webkit-appearance:none}button.card{background:none;border:0;margin-bottom:1em;margin-right:1em;padding:0}header{backdrop-filter:blur(5px);background-color:rgba(0,0,0,.15);display:flex;justify-content:space-around;z-index:99}header h2{background-color:transparent;color:#fff;font-size:inherit;margin:0;padding:1em;text-align:center;transition:all 1s;width:100%}header h2.active{background-color:hsla(0,0%,100%,.9);color:#000}@keyframes flicker{0%{background-color:hsla(0,0%,100%,.2);text-shadow:0 0 10px hsla(0,0%,100%,.4)}50%{background-color:hsla(0,0%,100%,.9)}to{background-color:hsla(0,0%,100%,.2);text-shadow:0 0 10px hsla(0,0%,100%,.4)}}header h2.active.client{animation:flicker 2s infinite}header h2 span{align-self:center}header span.handview{display:block;padding-top:.2em}header span.handview img{border-radius:.1em;display:inline-block;max-height:1em;vertical-align:top}main .wrapper{max-width:1200px;padding:2em 1em}#modal{backdrop-filter:blur(1px);background-color:rgba(0,0,0,.4);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:99}#modal_content{align-self:center;background-color:#fff;border-radius:1em;box-shadow:0 0 15px rgba(0,0,0,.7);color:#000;max-height:100%;max-width:100%;padding:2em}#modal_choose_suit{text-align:center}#modal_choose_suit button{background:none;border:0;display:inline-block;height:5em;padding:.5em;vertical-align:middle;width:5em}#modal_choose_suit button img{max-height:75%;max-width:100%;vertical-align:middle}#modal_victory{font-size:1.1em;text-align:center}#modal_victory strong{font-size:1.4em}#modal_menu button,#modal_message button,#modal_victory button{background:#fff;border:1px solid #000;border-radius:1em;color:#000;font-size:1em;margin-top:1em;padding:1em}#modal_menu{min-width:200px}#modal_menu small.version{color:silver;display:block;text-align:right}#modal_message{text-align:center}#modal_message a{color:#000}#log{backdrop-filter:blur(5px);background:rgba(0,0,0,.6);border-top:4px solid rgba(0,0,0,.8);bottom:-4px;display:flex;height:0;left:0;max-height:50vh;position:fixed;right:0;transition:height 1s;z-index:20}#log div{flex-grow:1;overflow-y:scroll;padding:1em;user-select:text}#log ul li{margin:.25em 0}#menu_toggle{right:2em}#log_toggle,#menu_toggle{display:block;position:absolute;top:-3em;transition:all 1s}#log_toggle{left:2em}#log_toggle,#menu_toggle{font-weight:700;text-decoration:none}#log_toggle:hover,#menu_toggle:hover{text-decoration:underline}#log.open{height:100%}#log.open #log_toggle{top:-2em}#app{background:linear-gradient(180deg,hsla(0,0%,100%,0) 90%,rgba(0,0,0,.9) 150%);margin:0 auto;min-height:calc(var(--vh, 1vh)*100);position:relative}#game{display:flex;flex-flow:column}#play_area{border-radius:6em;display:flex;justify-content:space-between;margin:0 auto;max-width:30em;padding:3em 4em;position:relative}#play_area .stack{display:inline-block;position:relative;transition:transform .2s}#play_area .stack .card.inactive{left:0;position:absolute;top:0;z-index:-1}#play_area .stack button.card{margin:0;position:relative;transition:transform .5s;z-index:2}body.mouse #play_area .stack button.card:hover{transform:rotate(-8deg) translateY(2em)}#topcard_area{display:inline-block}#opponent_cards{opacity:1;position:fixed;right:-1em;top:5em;transition:all .5s;z-index:98}#opponent_cards.hidden{opacity:0;right:-5em;top:0}#opponent_cards .card{margin-left:-125px;transition:transform 1s}#hand_area{display:flex;justify-content:center;padding:3em 1em}#hand{display:flex;flex-wrap:wrap}#hand button{margin-left:-25px;margin-right:-25px;position:relative;transition:transform .6s,margin .5s;z-index:1}body.mouse #hand button:not(:last-child):hover{margin-left:-50px;margin-right:0;margin-top:-25px}body #hand button.touch-hover:not(:last-child){margin-left:-25px;margin-right:0;margin-top:-90px;z-index:50}.card.draw{background:url(../img/cardbg.jpg);background-position:-5px -5px;background-repeat:no-repeat;background-size:100% auto;background-size:136px;display:inline-block}.card.topcard{position:relative;z-index:10}#setup{backdrop-filter:blur(2px);display:flex;height:100vh}#setup .wrapper{background:hsla(0,0%,100%,.9);border-radius:1rem;box-shadow:0 0 15px rgba(0,0,0,.35);color:#000;margin:auto;padding:2rem;text-align:center}#setup input[type=text]{background:transparent;border:0;border-bottom:1px solid #000;border-radius:0;font-family:inherit;font-size:inherit;margin:.5rem 0;max-width:180px;outline:0 none;padding:.2em;width:auto}#setup input[type=checkbox],#setup input[type=text]{-webkit-appearance:none;appearance:none;color:#000;display:inline-block;text-align:center}#setup input[type=checkbox]{background-color:transparent;border:1px solid #000;border-radius:0;font:inherit;height:1em;margin:0;transform:translateY(-.075em);vertical-align:middle;width:1em}#setup select{border-radius:0}#setup input[type=checkbox]:before{box-shadow:inset 1em 1em #000;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);content:"";display:inline-block;height:.65em;transform:scale(0);transform-origin:bottom left;transition:transform .12s ease-in-out;width:.65em}#setup input[type=checkbox]:checked:before{transform:scale(1)}#setup button{background:#fff;border:1px solid #000;border-radius:1em;color:#000;font-size:1em;margin-top:1em;padding:1em}.setup_row{margin:1em 0}.wrapper{margin:0 auto;padding:1em}.selectable{user-select:text}#message{bottom:3rem;font-size:1.5em;left:0;position:absolute;right:0;text-align:center;z-index:19}#message p{background:hsla(0,0%,100%,.9);border-radius:.5em;box-shadow:0 0 10px rgba(0,0,0,.3);color:#000;display:inline-block;padding:.5em 1em;vertical-align:middle}#message a{color:#000}img.inlinesuit{margin:0 .3em;max-height:1.7em;max-width:1.3em}img.inlinesuit,span.card{display:inline-block;vertical-align:middle}span.card{background-position-x:0;background-position-y:0;background-size:1024px auto;border-radius:1em;box-shadow:-2px 0 5px 0 rgba(0,0,0,.3);-webkit-box-shadow:-2px 0 5px 0 rgba(0,0,0,.3);-moz-box-shadow:-2px 0 5px 0 rgba(0,0,0,.3);height:199px;width:125px}span.card.A{background-position-x:-113.6%}span.card.K{background-position-x:-99.3%}span.card.O{background-position-x:-85%}span.card.U{background-position-x:-70.8%}span.card.X{background-position-x:-56.8%}span.card.IX{background-position-x:-42.6%}span.card.VIII{background-position-x:-28.2%}span.card.VII{background-position-x:-13.7%}span.card.Acorns{background-position-y:100%}span.card.Bells{background-position-y:33.5%}span.card.Leaves{background-position-y:66.7%}span.card.Hearts{background-position-y:0}div.unicard{height:199px;position:fixed;transform-style:preserve-3d;transition:transform .6s;width:125px}div.unicard .card.side{backface-visibility:hidden;height:100%;position:absolute;width:100%}.back{transform:rotateY(180deg)}.temphidden{opacity:0}#hand .temphidden .card{transition:width .6s;width:50px}body.mouse #hand .temphidden:not(:last-child):hover{transform:none}#game span.handview div{display:inline-block;height:1em;margin:0 1px;width:.65em}#game.bavarian span.card{background-image:url(../img/cards_bavarian_hires.png);border-radius:.7em}#game.bavarian span.card.draw,#game.bavarian span.handview div{background-image:url(../img/cardbg_bavarian.png);background-position:50%;background-size:cover}#game.bavarian div.unicard,#game.bavarian span.card{height:205px;width:125px}@media only screen and (max-width:480px){#game.bavarian div.unicard,#game.bavarian span.card{height:calc(205px*var(--scale-mobile));width:calc(125px*var(--scale-mobile))}}#game.bavarian span.handview div{height:1.05em}#game.bavarian span.card.A{background-position-x:-113.8%}#game.bavarian span.card.K{background-position-x:-99.5%}#game.bavarian span.card.O{background-position-x:-85.2%}#game.bavarian span.card.U{background-position-x:-71%}#game.bavarian span.card.X{background-position-x:-56.8%}#game.bavarian span.card.IX{background-position-x:-42.55%}#game.bavarian span.card.VIII{background-position-x:-28.32%}#game.bavarian span.card.VII{background-position-x:-14.1%}#game.bavarian span.card.Acorns{background-position-y:99.6%}#game.bavarian span.card.Bells{background-position-y:33.4%}#game.bavarian span.card.Leaves{background-position-y:66.55%}#game.bavarian span.card.Hearts{background-position-y:.35%}#game.tell span.card{background-image:url(../img/cards_tell.jpg)}#game.tell span.card.draw,#game.tell span.handview div{background-image:url(../img/cardbg.jpg);background-position:50%;background-size:cover}#game.tell div.unicard,#game.tell span.card{height:199px;width:125px}@media only screen and (max-width:480px){#game.tell div.unicard,#game.tell span.card{height:calc(199px*var(--scale-mobile));width:calc(125px*var(--scale-mobile))}}#game.bohemian span.card{background-image:url(../img/cards_bohemian.png)}#game.bohemian span.card.draw,#game.bohemian span.handview div{background-image:url(../img/cardbg_2.jpg);background-position:50%;background-size:cover}#game.bohemian div.unicard,#game.bohemian span.card{height:199px;width:125px}@media only screen and (max-width:480px){#game.bohemian div.unicard,#game.bohemian span.card{height:calc(199px*var(--scale-mobile));width:calc(125px*var(--scale-mobile))}}.opponent_hand-enter-active,.opponent_hand-leave-active{transition:all .5s}.opponent_hand-enter-from,.opponent_hand-leave-to{opacity:0;transform:translateX(-120px) translateY(-120px)}@media only screen and (max-width:768px){#opponent_cards{right:-3em;top:2em}}@media only screen and (max-width:700px){#opponent_cards{right:-5em;top:-1em}}@media only screen and (max-width:480px){body{font-size:.9em}main .wrapper{padding-top:3em}div.unicard,span.card{height:calc(199px*var(--scale-mobile));width:calc(125px*var(--scale-mobile))}span.card{background-size:calc(1024px*var(--scale-mobile)) auto;border-radius:var(--mobile-radius)}#message{bottom:4rem;font-size:1.1em;font-weight:700}#play_area{border-radius:4em;border-width:3px;max-width:20em;padding:2em 3em}.card.draw{background-position:-4px -4px;background-size:70px}#opponent_cards{right:-2em;top:2em}#opponent_cards .card{margin-left:calc(-125px*var(--scale-mobile))}#hand button{margin-left:-12px;margin-right:-12px}body.mouse #hand button:not(:last-child):hover{margin-left:-24px;margin-right:0;margin-top:-25px}}@media only screen and (min-width:480px){body{overflow-x:hidden}}