*{box-sizing:border-box;margin:0}html,body{width:100%;min-height:100%}body{color:#2f1b0f;background:radial-gradient(circle at top,#ffe6c0e6,#0000 35%),linear-gradient(#fff9f1 0%,#ffe5d5 100%);min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.wrapper{flex-direction:column;align-items:center;gap:24px;width:min(960px,100%);margin:0 auto;padding:56px 20px 64px;display:flex}.wrapper-title h2{letter-spacing:-.04em;text-align:center;font-size:clamp(2rem,4vw,3rem)}.container{grid-template-columns:repeat(3,minmax(110px,180px));justify-content:center;gap:20px;width:100%;display:grid}.card{aspect-ratio:18/23;width:100%;transform-style:preserve-3d;cursor:pointer;opacity:1;transition:transform .5s,opacity .8s;position:relative}.card-front,.card-back{backface-visibility:hidden;border:1px solid #2f1b0f2e;border-radius:18px;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden;box-shadow:0 18px 40px #743d1d29}.card-front{background:linear-gradient(160deg,#f97316,#ea580c)}.card-front:before{content:"?";color:#fff7ed;font-size:clamp(2.6rem,6vw,4rem);font-weight:700}.card-back{background:#fff;transform:rotateY(180deg)}.card-back img{object-fit:contain;width:100%;height:100%}.flipped{transform:rotateY(180deg)}.fade-out{opacity:0;pointer-events:none}.shuffle-btn{color:#fff7ed;cursor:pointer;background:linear-gradient(135deg,#7c2d12,#c2410c);border:0;border-radius:999px;padding:14px 28px;font-size:1rem;font-weight:700;transition:transform .2s,box-shadow .2s,opacity .2s;box-shadow:0 14px 28px #7c2d1238}.shuffle-btn:hover{opacity:.92;transform:translateY(-2px);box-shadow:0 18px 30px #7c2d1242}.shuffle-btn:focus-visible{outline-offset:4px;outline:3px solid #c2410c47}@media (width<=768px){.wrapper{padding:40px 16px 48px}.container{grid-template-columns:repeat(2,minmax(120px,170px))}.shuffle-btn{width:100%;max-width:320px}}