.memory-game,.memory-game *{box-sizing:border-box;margin:0;padding:0}.memory-game{background:transparent;min-height:100vh;overflow:hidden;position:relative}.memory-game .header{color:#fff;margin-bottom:20px;text-align:center}.memory-game h1{color:#fff!important;font-size:48px}.memory-game .header p{color:#fff!important;font-size:24px}.memory-game #topBar{top:72px}.memory-game #bottomBar,.memory-game #topBar{align-items:center;display:flex;flex-direction:column;left:50%;max-width:1600px;position:absolute;transform:translateX(-50%);width:100vw;z-index:100}.memory-game #bottomBar{bottom:48px;z-index:8}.memory-game .stats{align-items:center;background:hsla(0,0%,100%,.2);border-radius:12px;color:#fff;display:flex;font-size:16px;gap:24px;margin:0 auto;padding:12px 24px;width:fit-content}.memory-game .stat-item{align-items:left;display:flex;flex-direction:column}.memory-game .stat-label{font-size:16px}.memory-game .stat-value{font-size:24px;font-weight:700}.memory-game #timer{display:inline-block;text-align:left;width:80px}.memory-game .win-stats{display:flex;gap:16px;justify-content:center;margin:8px 0 16px}.memory-game .win-stats .stat-item{background:hsla(0,0%,100%,.08);border-radius:10px;min-width:90px;padding:8px 12px;text-align:center}.memory-game .win-stats .stat-label{display:block;font-size:16px;margin-bottom:0}.memory-game .win-stats .stat-value{font-size:20px;font-weight:600}.memory-game .reset-btn{align-items:center;background:transparent;border:none;cursor:pointer;display:flex;justify-content:center;line-height:1;margin-left:auto;padding:4px;transition:transform .25s ease}.memory-game .reset-btn .reset-icon{fill:#fff;height:24px;transition:transform .25s ease;width:24px}.memory-game .reset-btn:hover{transform:rotate(90deg) scale(1.12)}.memory-game .reset-btn:active{transform:rotate(180deg) scale(1.24)}.memory-game .game-container{left:50%;position:absolute;transform:translateX(-50%);width:clamp(480px,100vw,1600px);z-index:12}.memory-game .revealed-pairs{align-items:center;background:hsla(0,0%,100%,.16);border-radius:24px;display:inline-flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 auto;max-width:100%;min-width:auto;padding:16px;width:auto}.memory-game .revealed-slot{align-items:center;background:hsla(0,0%,100%,.2);border:2px dashed hsla(0,0%,100%,.3);border-radius:12px;color:#fff;display:flex;flex-direction:column;font-size:24px;font-weight:700;height:80px;justify-content:center;overflow:hidden;transition:all .3s ease;width:80px}.memory-game .revealed-thumb{border-radius:inherit;height:100%;object-fit:cover;pointer-events:none;width:100%}.memory-game .revealed-slot.filled{animation:fillSlot .5s ease-out;border:none}.memory-game .revealed-card-name{font-size:12px;margin-top:4px}@keyframes fillSlot{0%{opacity:0;transform:scale(0) rotate(180deg)}50%{transform:scale(1.2) rotate(0deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}.memory-game .card{border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.12);cursor:pointer;height:160px;position:absolute;transform:rotate(calc(var(--rotation, 0deg) + var(--hover-tilt-angle, 0deg))) scale(var(--hover-scale,1));transform-origin:center center;transform-style:preserve-3d;transition:box-shadow .25s ease,transform .25s ease;width:160px;z-index:1;--hover-scale:1;--hover-tilt-angle:0deg;--hover-tilt:3deg}.memory-game .card.is-hovered:not(.flipped),.memory-game .card:hover:not(.flipped){--hover-scale:1.08;--hover-tilt-angle:var(--hover-tilt);box-shadow:0 8px 24px rgba(0,0,0,.24);z-index:4}.memory-game .card.flipped{border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.12);transform:rotate(calc(var(--rotation, 0deg) + var(--hover-tilt-angle, 0deg))) rotateY(180deg) scale(var(--hover-scale,1))}.memory-game .card.flipped.is-hovered,.memory-game .card.flipped:hover{--hover-scale:1.08;--hover-tilt-angle:var(--hover-tilt);box-shadow:0 8px 24px rgba(0,0,0,.24);z-index:5}.memory-game .card.flipped.matched{border-radius:12px;transform:rotate(calc(var(--rotation) + var(--hover-tilt-angle, 0deg))) rotateY(180deg) scale(var(--hover-scale,1))}.memory-game .card.flipped.matched.is-hovered,.memory-game .card.flipped.matched:hover{--hover-scale:1.08;--hover-tilt-angle:var(--hover-tilt);box-shadow:0 8px 24px rgba(0,0,0,.24);z-index:5}.memory-game .card.flipped.matched .card-front{animation:fadeOut .5s ease-in-out .2s both;will-change:opacity;z-index:2}.memory-game .card.flipped.matched .card-back{opacity:0!important;visibility:hidden}.memory-game .card.flipped.wrong{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}.memory-game .card.flipped.wrong.is-hovered,.memory-game .card.flipped.wrong:hover{--hover-scale:1.08;--hover-tilt-angle:var(--hover-tilt);box-shadow:0 8px 24px rgba(0,0,0,.24);z-index:5}.memory-game .card-face{align-items:center;backface-visibility:hidden;border-radius:12px;display:flex;flex-direction:column;font-size:48px;font-weight:700;height:100%;justify-content:center;overflow:hidden;position:absolute;width:100%}.memory-game .card-back{background:#fff;color:#fff}.memory-game .card-front{color:#fff;transform:rotateY(180deg)}.memory-game .card-name{font-size:14px;margin-top:10px}.memory-game .card[data-pair="1"] .card-front{background:linear-gradient(135deg,#f093fb,#f5576c)}.memory-game .card[data-pair="2"] .card-front{background:linear-gradient(135deg,#4facfe,#00f2fe)}.memory-game .card[data-pair="3"] .card-front{background:linear-gradient(135deg,#43e97b,#38f9d7)}.memory-game .card[data-pair="4"] .card-front{background:linear-gradient(135deg,#fa709a,#fee140)}.memory-game .card[data-pair="5"] .card-front{background:linear-gradient(135deg,#30cfd0,#330867)}.memory-game .card[data-pair="6"] .card-front{background:linear-gradient(135deg,#a8edea,#fed6e3)}.memory-game .card[data-pair="7"] .card-front{background:linear-gradient(135deg,#ff9a9e,#fecfef)}.memory-game .card[data-pair="8"] .card-front{background:linear-gradient(135deg,#ffecd2,#fcb69f)}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes shake{0%{transform:translateX(0) rotate(calc(var(--rotation) + var(--hover-tilt-angle, 0deg))) rotateY(180deg) scale(var(--hover-scale,1))}10%,90%{transform:translateX(-2px) rotate(calc(var(--rotation) + var(--hover-tilt-angle, 0deg))) rotateY(180deg) scale(var(--hover-scale,1))}20%,80%{transform:translateX(2px) rotate(calc(var(--rotation) + var(--hover-tilt-angle, 0deg))) rotateY(180deg) scale(var(--hover-scale,1))}30%,50%,70%{transform:translateX(-4px) rotate(calc(var(--rotation) + var(--hover-tilt-angle, 0deg))) rotateY(180deg) scale(var(--hover-scale,1))}40%,60%{transform:translateX(4px) rotate(calc(var(--rotation) + var(--hover-tilt-angle, 0deg))) rotateY(180deg) scale(var(--hover-scale,1))}to{transform:translateX(0) rotate(calc(var(--rotation) + var(--hover-tilt-angle, 0deg))) rotateY(180deg) scale(var(--hover-scale,1))}}.memory-game .confetti{height:10px;pointer-events:none;position:fixed;width:10px;z-index:1000}.memory-game .snowflake{animation:snowfall linear infinite;pointer-events:none;position:fixed;top:-50px;z-index:0;--fall-progress:0;--sway-x:0px}@keyframes snowfall{0%{opacity:0;transform:translateY(-50px) translateX(0) rotate(0deg) scale(var(--snowflake-scale,1))}5%{opacity:.8}12.5%{transform:translateY(calc(var(--fall-progress)*.125)) translateX(var(--sway-distance,20px)) rotate(45deg) scale(var(--snowflake-scale,1))}25%{transform:translateY(calc(var(--fall-progress)*.25)) translateX(0) rotate(90deg) scale(var(--snowflake-scale,1))}37.5%{transform:translateY(calc(var(--fall-progress)*.375)) translateX(calc(var(--sway-distance, 20px)*-1)) rotate(135deg) scale(var(--snowflake-scale,1))}50%{transform:translateY(calc(var(--fall-progress)*.5)) translateX(0) rotate(180deg) scale(var(--snowflake-scale,1))}62.5%{transform:translateY(calc(var(--fall-progress)*.625)) translateX(var(--sway-distance,20px)) rotate(225deg) scale(var(--snowflake-scale,1))}75%{transform:translateY(calc(var(--fall-progress)*.75)) translateX(0) rotate(270deg) scale(var(--snowflake-scale,1))}87.5%{transform:translateY(calc(var(--fall-progress)*.875)) translateX(calc(var(--sway-distance, 20px)*-1)) rotate(315deg) scale(var(--snowflake-scale,1))}95%{opacity:.8}to{opacity:0;transform:translateY(calc(100vh + 50px)) translateX(0) rotate(1turn) scale(var(--snowflake-scale,1))}}@keyframes confetti{0%{opacity:1;transform:translateY(0) rotate(0deg)}to{opacity:0;transform:translateY(100vh) rotate(2turn)}}.memory-game .modal{align-items:center;background-color:rgba(52,68,74,.48);display:none;inset:0;justify-content:center;position:absolute;z-index:2000}.memory-game .modal.active{display:flex}.memory-game .modal-content{background:#fff;border-radius:20px;max-height:90vh;max-width:600px;overflow-y:auto;padding:40px;text-align:center}.memory-game .modal-content h2{color:#080b0c;font-size:32px;margin-bottom:20px}.memory-game .modal-content p{color:#34444a;font-size:18px;margin-bottom:12px}.memory-game .portrait-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));justify-items:center;margin-bottom:40px}.memory-game .portrait-item{border-radius:12px;overflow:hidden}.memory-game .portrait-thumb{border-radius:inherit;display:block;height:120px;object-fit:cover;width:120px}.memory-game .portrait-placeholder{align-items:center;border-radius:12px;color:#fff;display:flex;font-size:32px;font-weight:700;height:80px;justify-content:center;margin-bottom:20px;overflow:hidden;width:80px}.memory-game .portrait-name{color:#555;font-size:14px}.memory-game .button-group{display:flex;gap:12px;justify-content:center}.memory-game .btn{border:none;border-radius:10px;cursor:pointer;display:inline-block;font-size:16px;font-weight:700;padding:15px 30px;text-decoration:none;transition:transform .2s}.memory-game .btn:hover{transform:scale(1.05)}.memory-game .btn-primary,.memory-game .btn-secondary{background:linear-gradient(90deg,#204151,#0e2735);color:#fff}@media (max-width:768px){.memory-game{min-height:100vh;padding:0 16px}.memory-game #bottomBar,.memory-game #topBar{left:50%;max-width:100%;padding:0;transform:translateX(-50%);width:calc(100% - 72px)}.memory-game #topBar{top:20px}.memory-game #bottomBar{align-items:center;bottom:20px;display:flex;height:auto;justify-content:center;max-height:32vh;overflow-y:auto;padding:0}.memory-game .header{margin-bottom:16px}.memory-game .header h1{font-size:20px;line-height:1.2}.memory-game .header p{font-size:14px;line-height:1.2;margin-top:4px}.memory-game .stats{border-radius:8px;flex-wrap:wrap;font-size:12px;gap:16px;justify-content:center;padding:8px 16px}.memory-game .stat-item{min-width:auto}.memory-game .stat-label{font-size:10px}.memory-game .stat-value{font-size:16px}.memory-game #timer{width:48px}.memory-game .win-stats{align-items:center;flex-direction:row;gap:4px}.memory-game .win-stats .stat-item{max-width:160px;padding:0 16px}.memory-game .win-stats .stat-label{font-size:14px}.memory-game .win-stats .stat-value{font-size:18px}.memory-game .reset-btn{margin-left:0;padding:0 4px}.memory-game .reset-btn .reset-icon{height:20px;width:20px}.memory-game .game-container{width:100%}.memory-game .card{border-radius:8px;height:80px;width:80px}.memory-game .card-face{font-size:12px}.memory-game .card.flipped.is-hovered,.memory-game .card.flipped:hover,.memory-game .card.is-hovered:not(.flipped),.memory-game .card:hover:not(.flipped){--hover-scale:1.02;--hover-tilt-angle:0deg;box-shadow:0 4px 16px rgba(0,0,0,.2)}.memory-game .revealed-pairs{align-items:center;border-radius:12px;display:inline-flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:0 auto;max-width:100%;min-width:auto;padding:8px;width:auto}.memory-game .revealed-slot{border-radius:8px;height:40px;width:40px}.memory-game .revealed-card-name{font-size:10px}.memory-game .modal-content{max-width:80vw;padding:24px 16px}.memory-game .modal-content h2{font-size:20px;margin-bottom:12px}.memory-game .modal-content p{font-size:14px;margin-bottom:12px}.memory-game .portrait-grid{column-gap:4px;grid-template-columns:repeat(4,1fr);margin-bottom:24px;row-gap:8px}.memory-game .portrait-thumb{height:64px;width:64px}.memory-game .button-group{flex-direction:column}.memory-game .btn{font-size:14px;padding:8px 16px;width:100%}}