:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;color:#ffffffde;background-color:#242424}body{margin:0;display:flex;justify-content:center;align-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1;margin:0}#app{display:flex;justify-content:center;align-items:center;flex-direction:column;max-width:1280px;margin:0 auto;padding:1rem;text-align:center}#message{height:40px;color:#c8b8db}#attempts{margin:0 0 20px}#card-container{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;box-sizing:border-box;width:100%;max-width:660px}.card{background-color:transparent;aspect-ratio:150 / 190;cursor:pointer;perspective:1000px}.card-inner{position:relative;width:100%;height:100%;transition:transform .8s;transform-style:preserve-3d}.card-front,.card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;justify-content:center;align-items:center;border-radius:3%}.card-front{background-color:#70587c;transition:transform .3s ease,background-color .3s ease}.card-front:hover{background-color:#502f4c}.card-back{background-color:#c8b8db;transform:rotateY(180deg)}.flipped .card-inner{transform:rotateY(180deg)}.card-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:3%}#start{background-color:#502f4c;font-size:1.5rem;margin:20px;color:#fff;padding:10px 20px;width:auto;height:auto;border:1px solid #502f4c;border-radius:5px;cursor:pointer;transition:border .5s ease,box-shadow .5s ease}#start:hover{border:1px solid #777ce0;box-shadow:0 0 10px #777ce080}button:disabled{cursor:none;opacity:50%}@media (max-width: 768px){h1{font-size:2.5em}h2{font-size:1.1em}#card-container{grid-template-columns:repeat(3,1fr);gap:12px;max-width:480px}#start{font-size:1.3rem;padding:8px 18px}}@media (max-width: 480px){h1{font-size:2em}h2{font-size:1em;height:auto;margin-bottom:10px}h3#attempts{margin-bottom:15px}#card-container{grid-template-columns:repeat(3,1fr);gap:8px;max-width:300px}#start{font-size:1.1rem;padding:6px 15px;margin-top:15px}}@media (max-width: 350px){#card-container{grid-template-columns:repeat(2,1fr);max-width:220px;gap:6px}}