body{margin:0;padding:0;min-width:320px;min-height:100vh;width:100%;height:100vh;overflow:hidden}#root{width:100%;height:100%}:root{--card-width: 210px;--card-height: calc(var(--card-width) * 1.4);--spacing: 40px;--card-number-size: calc(var(--card-width) * .12);--suit-size: calc(var(--card-width) * .13)}@media (max-width: 600px){:root{--card-width: 150px}}html,body,#root{height:100%;margin:0;padding:0}.tinkerdeck-container{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom right,#2a303c,#16161e);overflow-y:auto;padding:1rem}.tinkerdeck-title{font-size:min(4rem,10vw);font-family:Wallpoet,monospace;font-weight:400;font-style:normal;color:#fff;text-align:center;margin:1rem 0 2rem}.cards-container{position:relative;margin:0 auto;width:100%;max-width:1200px;padding-bottom:40px}.card{position:absolute;top:20px;left:50%;width:var(--card-width);height:var(--card-height);border-radius:12px;perspective:1000px;transform-style:preserve-3d;font-size:calc(var(--card-number-size))}.card-front{font-size:calc(var(--card-number-size));position:absolute;width:100%;height:100%;border-radius:12px;background-color:#fff;box-shadow:0 4px 8px #0003;display:flex;flex-direction:column;transform:rotateY(180deg);backface-visibility:hidden;border:1px solid #DDD;overflow:hidden;transition:box-shadow .2s ease}.card:hover .card-front{box-shadow:10px 10px #fff9}.card-corner{position:absolute;top:.3em;left:.25em;display:flex;flex-direction:column;align-items:center;width:1em}.card-corner.bottom-right{top:auto;left:auto;bottom:.3em;right:.25em;transform:rotate(180deg)}.corner-initial{font-size:calc(var(--card-number-size));font-family:Major Mono Display;font-weight:700;line-height:1}.corner-suit{font-size:calc(var(--suit-size));margin-top:calc(var(--card-width) * -.025);font-family:Montserrat}.card-image{margin:calc(var(--card-width) * .067) 1.5em calc(var(--card-width) * .08);flex-grow:1;display:flex;align-items:center;justify-content:center;border:2px solid #CCC;background-color:#f9f9f9;overflow:hidden}.card-image img{width:100%;height:100%;object-fit:cover}.card-info{margin-top:auto;text-align:center;background-color:#f0f0f0;padding:8px;margin-left:1.5em;margin-right:1.5em;margin-bottom:calc(var(--card-width) * .067);border:2px solid #CCC}.card-title{font-size:calc(var(--card-width) * .09);font-weight:700;margin:0;font-family:Montserrat}.card-border{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:12px;pointer-events:none}.card-back{position:absolute;width:100%;height:100%;border-radius:12px;background-color:#2563eb;box-shadow:0 4px 8px #0003;backface-visibility:hidden;padding:8px;border:8px solid white;transition:box-shadow .2s ease}.card:hover .card-back{box-shadow:0 8px 16px #0000004d}.card-back-inner{width:100%;height:100%;border:2px solid white;border-radius:6px;display:flex;align-items:center;justify-content:center;position:relative;background-color:#1d4ed8;overflow:hidden}.card-pattern{position:absolute;width:200%;height:200%;background-image:repeating-linear-gradient(45deg,#ffffff33 0px,#ffffff33 2px,transparent 2px,transparent 12px);transform:rotate(45deg);top:-50%;left:-50%}.card-back-text{background-color:#ffffffe6;padding:calc(var(--card-width) * .05) calc(var(--card-width) * .1);border-radius:8px;transform:rotate(-45deg);position:relative;z-index:10;box-shadow:0 2px 4px #0000001a}.card-back-title{font-size:calc(var(--card-width) * .08);font-weight:700;margin:0;letter-spacing:1px;color:#1d4ed8}.corner-circle{position:absolute;width:calc(var(--card-width) * .13);height:calc(var(--card-width) * .13);border-radius:50%;border:2px solid white}.corner-circle.top-left{top:8px;left:8px}.corner-circle.top-right{top:8px;right:8px}.corner-circle.bottom-left{bottom:8px;left:8px}.corner-circle.bottom-right{bottom:8px;right:8px}