.memory-game-container { background: var(--surface); padding: 2rem; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); border: 2px solid #edf2f7; }
.game-hud { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px dashed #e2e8f0; flex-wrap: wrap; gap: 1rem; }
.hud-item { font-size: 1.5rem; font-family: 'Fredoka One', cursive; white-space: nowrap; }
.hud-label { color: var(--text-muted); }
.hud-value { color: var(--blue); margin-left: 5px; }
.timer-value { color: var(--red); }
.game-controls { flex: 1 1 auto; text-align: center; }
.game-controls .btn-play { margin-bottom: 0; padding: 0.8rem 2rem; }
.memory-board { display: grid; gap: 15px; justify-content: center; perspective: 1000px; margin-bottom: 2rem; min-height: 300px; }
.memory-card { width: 80px; height: 100px; position: relative; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); cursor: pointer; }
@media(min-width: 600px) { .memory-card { width: 100px; height: 130px; } }
.memory-card.flipped { transform: rotateY(180deg); cursor: default; }
.memory-card-front, .memory-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 3rem; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.memory-card-back { background: linear-gradient(135deg, var(--blue), var(--green)); color: transparent; border: 2px solid #ffffff; }
.memory-card-back::after { content: '?'; color: rgba(255,255,255,0.8); font-family: 'Fredoka One'; }
.memory-card-front { background: #ffffff; transform: rotateY(180deg); border: 3px solid var(--blue); }