*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;font-family:sans-serif;background:#143f59;overflow:hidden}body.wyr{background:#ef78cf!important}body.qa{background:#257ca0!important}body.emote{background:#85aa98!important}body.fav{background:#039d84!important}pre.ascii-art{font-family:monospace;white-space:pre;text-align:center;color:#f2ebdf}.mobile-title{display:none}@media (max-width: 600px) and (orientation: portrait){pre.ascii-art{display:none}.mobile-title{display:block;font-size:1.8rem;color:#f2ebdf;text-align:center;margin-bottom:1rem}}#name-prompt{position:fixed;top:0;right:0;bottom:0;left:0;background:#143f59f2;display:flex;align-items:center;justify-content:center;z-index:10}.name-form{display:flex;flex-direction:column;align-items:center}.name-form label{color:#f2ebdf;font-size:1.5rem;margin-bottom:.5rem}.name-form input{padding:.5rem;font-size:1rem;border:none;border-radius:4px;margin-bottom:1rem;width:200px}.name-form button{padding:.5rem 1rem;font-size:1rem;background:#a62626;color:#f2ebdf;border:none;border-radius:4px;cursor:pointer}#game-select{position:fixed;top:0;right:0;bottom:0;left:0;background:#143f59f2;display:flex;justify-content:center;align-items:center;z-index:10}.popup-container{text-align:center}.popup-container h2{color:#f2ebdf;font-size:2.5rem;margin-bottom:1rem}.button-container{display:flex;gap:1rem}.button-container button{padding:1rem 2rem;font-size:1.25rem;background:#a62626;color:#f2ebdf;border:none;border-radius:8px;cursor:pointer;transition:background .2s ease,transform .2s ease}.button-container button:hover{background:#d64545;transform:scale(1.05)}#game-area{position:relative;width:100%;height:100%;perspective:1000px}.card{width:250px;height:350px;position:absolute;top:50%;left:50%;cursor:pointer}#deck{z-index:1;border-radius:8px;overflow:hidden;transform:translate(-50%,-50%);transition:transform .6s ease}#drawn{z-index:2;border-radius:8px;overflow:hidden;transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:transform .6s ease,opacity .6s ease}body.started #deck{transform:translate(calc(-50% - 200px),-50%)}body.started #drawn{transform:translate(calc(-50% + 200px),-50%);opacity:1;pointer-events:auto}.card-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s ease;transform:rotateY(0);border-radius:8px;box-shadow:0 4px 8px #0003}.card-inner.flipped{transform:rotateY(180deg)}.card-front,.card-back{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:1rem;font-size:1.2rem;text-align:center;backface-visibility:hidden}.card-back{background:url(../cardback.jpeg) center center / cover no-repeat;transform:rotateY(0);pointer-events:none}.card-front{background:#f2ebdf;transform:rotateY(180deg);visibility:hidden;pointer-events:auto}.card-inner.flipped .card-front{visibility:visible}.card-inner.flipped .card-back{visibility:hidden}body.qa .card-back{background:url(../cardbackqa.jpeg) center center / cover no-repeat!important}body.wyr .card-back{background:url(../cardbackwyr.jpeg) center center / cover no-repeat!important}body.emote .card-back{background:url(../cardbackemote.jpeg) center center / cover no-repeat!important}body.fav .card-back{background:url(../cardbackfav.jpeg) center center / cover no-repeat!important}#fav-toggle,#change-deck{position:fixed;left:1rem;font-size:2rem;background:none;border:none;color:#f2ebdf;cursor:pointer;z-index:20;transition:transform .2s ease}#fav-toggle{top:1rem}#change-deck{top:4rem}#fav-toggle:active,#change-deck:active{transform:scale(1.1)}.toast{position:fixed;top:1rem;left:6rem;background:#000c;color:#fff;padding:.5rem 1rem;border-radius:4px;opacity:0;transition:opacity .3s ease;pointer-events:none}.toast.show{opacity:1}@media (max-width: 600px) and (orientation: portrait){#game-area{display:flex;flex-direction:column;align-items:center;height:auto;padding:1rem 0}#deck,#drawn,.card{position:relative;transform:none!important;margin-bottom:1rem;width:80vw;height:112vw}}html,body,button,.card{cursor:url(../cursor.png) 16 16,auto}body *:hover{cursor:url(../cursorhover.png) 16 16,auto}body:active,button:active,.card:active{cursor:url(../cursorclick.png) 16 16,auto}