:root{--card-border-radius: 3px}.game-board{display:flex;align-items:center;flex-direction:column;height:100vh;position:relative}.card-table{flex:1;display:flex;align-items:center;height:100%}.playing-card{transition:transform .5s;box-shadow:0 0 5px #0003}.playing-cards{display:grid;grid-template-columns:repeat(13,1fr);gap:10px}.playing-card{width:80px;aspect-ratio:427 / 600;display:flex;align-items:center;justify-content:center}.playing-card:hover{transform:scale(1.05)}.playing-card.discarded{transform:scale(0)}.playing-card img{height:auto;width:100%;user-drag:none;-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.playing-card.red{color:red}.flip-card{background-color:transparent;perspective:1000px}.flip-card-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform .8s;transform-style:preserve-3d}.flip-card.flipped .flip-card-inner{transform:rotateY(180deg)}.flip-card-front,.flip-card-back{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.flip-card-back{border-radius:var(--card-border-radius);transform:rotateY(180deg);background-color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:0 .25rem}.flip-card-back .card-suit{font-size:1.35rem;font-weight:700}.flip-card-back .card-value{font-size:3.5rem;font-weight:700;text-align:center;line-height:1;font-family:Arial,Helvetica,sans-serif}.flip-card-back>div:first-child{text-align:left}.flip-card-back>div:last-child{text-align:left;transform:rotate(180deg)}@media (orientation: portrait){.playing-cards{grid-template-columns:repeat(7,1fr)}.playing-card{--size: 44px;--third: calc(var(--size) / 3);height:calc(var(--third) + var(--size));width:var(--size)}}@media (max-width: 576px){.flip-card-back .card-suit{font-size:.6rem}.flip-card-back .card-value{font-size:1.2rem}}.site-header{background-color:#0006;display:flex;justify-content:space-between;align-items:center;padding:10px;max-height:60px;width:100%}.site-header h1{color:#fff;padding:0}.site-header button{background-color:#39c;color:#fff;border:none;border-radius:8px;padding:10px 20px}.footer{background-color:#0006;padding:10px;display:flex;width:100%;color:#fff}.footer div{margin-right:10px}.btn-primary{background-color:#39c;color:#fff;border:none;border-radius:8px;padding:10px 20px}@media (max-width: 576px){.site-header{padding:0 5px}.site-header h1{font-size:1rem}.site-header button{padding:4px 8px}}.dialog-backdrop{background-color:#0009;height:100%;width:100%;position:fixed;left:0;top:0;display:flex;align-items:center;justify-content:center}.dialog{background-color:#fff;color:#000;border-radius:8px;box-shadow:0 0 10px #0000001a;width:80%;padding:2rem;display:flex;justify-content:center;align-items:center;flex-direction:column;max-width:300px}html,body{background:linear-gradient(135deg,#16a085 0,#107360);background-attachment:fixed;padding:0;margin:0;height:100%;font-family:sans-serif}*{box-sizing:border-box}#root{height:100%}