:root{--card-size: min( calc((100vw - 32px)/4) , 80px);--card-gap: min(1vw, 4px);--card-border-width: 2px;--card-border-radius: 6px;--card-scale: 1.05;--card-transition: .3s;--text-shadow-blur: 2px;--text-shadow-offset: 1px;--font-size-score: 18px;--font-size-card: 1.5em;--margin-bottom: 16px}body{font-family:Arial,sans-serif;background-color:#f0f0f0;margin:0;padding:16px;min-height:100vh;box-sizing:border-box}#root{display:flex;flex-direction:column;align-items:center;max-width:1200px;margin:0 auto;padding-top:20px}.board{display:grid;grid-template-columns:repeat(4,var(--card-size));grid-template-rows:repeat(8,var(--card-size));gap:var(--card-gap);width:fit-content;margin:0 auto}.card{width:var(--card-size);height:var(--card-size);background-color:#fff;border:var(--card-border-width) solid #ccc;border-radius:var(--card-border-radius);display:flex;justify-content:center;align-items:center;cursor:pointer;transition:transform var(--card-transition)}.card.flipped{background-color:#4caf50;border-color:#388e3c;transform:scale(var(--card-scale))}.card-back{width:100%;height:100%;background:linear-gradient(135deg,gold,#700f72);border-radius:var(--card-border-radius);display:flex;justify-content:center;align-items:center;font-size:var(--font-size-card);color:#fff;text-shadow:var(--text-shadow-offset) var(--text-shadow-offset) var(--text-shadow-blur) rgba(0,0,0,.3)}.card img{max-width:100%;max-height:100%;border-radius:var(--card-border-radius)}.score{font-size:var(--font-size-score);margin-bottom:var(--margin-bottom);text-align:center}.players{display:flex;justify-content:space-between;margin-bottom:var(--margin-bottom);width:100%;max-width:1000px;padding:0 16px}.player{padding:1rem 2rem;border-radius:var(--card-border-radius);background-color:#fff;text-align:center;min-width:150px;box-shadow:0 2px 4px #0000001a}.player.active{background-color:#4caf50;color:#fff}@media (min-width: 768px){:root{--card-size: min( calc((100vw - 48px)/5) , 100px);--card-gap: min(1.5vw, 6px);--font-size-score: 20px}.board{grid-template-columns:repeat(5,var(--card-size));grid-template-rows:repeat(6,var(--card-size))}}@media (min-width: 1024px){:root{--card-size: min(calc((100vw - 64px) / 6), 120px);--card-gap: min(2vw, 8px);--font-size-score: 24px}.board{grid-template-columns:repeat(6,var(--card-size));grid-template-rows:repeat(5,var(--card-size))}}h1{font-size:calc(var(--font-size-score) * 1.5);margin-bottom:var(--margin-bottom);text-align:center}button{display:block;margin:0 auto var(--margin-bottom);padding:8px 16px;font-size:var(--font-size-score);border-radius:var(--card-border-radius);cursor:pointer}