.memory-game{--primary-color:#4f46e5;--secondary-color:#10b981;--accent-color:#f59e0b;--danger-color:#ef4444;--text-color:#1f2937;--bg-color:#f9fafb;--card-bg:#fff;--card-border:#e5e7eb;--shadow:0 4px 6px -1px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a;--border-radius:.5rem;--transition:all .3s ease;width:100vw;height:100vh;max-height:100vh;color:var(--text-color);box-sizing:border-box;background-color:#0000;flex-direction:column;padding:.5rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex;overflow:hidden}.game-header{text-align:center;margin-bottom:2rem}.game-header h1{color:var(--primary-color);margin:0 0 .5rem;font-size:2.5rem;font-weight:700}.game-description{color:#6b7280;max-width:500px;margin:0 auto;font-size:1.1rem}.game-top-panel{background:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--shadow);flex-shrink:0;justify-content:space-between;align-items:center;gap:1rem;min-height:60px;margin-bottom:1rem;padding:.75rem 1rem;display:flex}.panel-section{flex-shrink:0;align-items:center;gap:.5rem;display:flex}.panel-progress{flex:1;min-width:200px}.progress-container{flex-direction:column;gap:.25rem;display:flex}.progress-text{justify-content:space-between;align-items:center;gap:.5rem;font-size:.875rem;display:flex}.progress-label{color:#6b7280;flex-shrink:0;font-weight:500}.progress-value{color:var(--text-color);margin-left:auto;font-weight:600}.time-display{border-left:2px solid var(--card-border);align-items:center;gap:.375rem;margin-left:1rem;padding-left:1rem;display:flex}.game-instruction{border-left:2px solid var(--card-border);margin-left:1rem;padding-left:1rem}.instruction-text{color:var(--accent-color);white-space:nowrap;font-size:.875rem;font-weight:600}.time-icon{font-size:1rem}.time-value{color:var(--text-color);min-width:60px;font-size:.875rem;font-weight:600}.panel-controls{flex-shrink:0;align-items:center;gap:1rem;margin-left:auto;display:flex}.difficulty-select{border:2px solid var(--card-border);border-radius:calc(var(--border-radius)*.75);background:var(--card-bg);color:var(--text-color);cursor:pointer;transition:var(--transition);min-width:120px;padding:.5rem .75rem;font-size:.875rem;font-weight:500}.difficulty-select:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 3px #4f46e51a}.difficulty-select:disabled{opacity:.6;cursor:not-allowed}.new-game-btn{background:var(--primary-color);color:#fff;border-radius:calc(var(--border-radius)*.75);cursor:pointer;transition:var(--transition);white-space:nowrap;border:none;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:600;display:flex}.new-game-btn:hover{background:#4338ca;transform:translateY(-1px)}.new-game-btn:active{transform:translateY(0)}.btn-icon{font-size:1rem}.btn-text{font-size:.875rem}.panel-hint{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:.25rem;display:flex}.hint-btn{background:var(--accent-color);color:#fff;border-radius:calc(var(--border-radius)*.75);cursor:pointer;transition:var(--transition);white-space:nowrap;border:none;align-items:center;gap:.375rem;padding:.5rem 1rem;font-size:.875rem;font-weight:600;display:flex}.hint-btn:hover:not(.disabled){background:#d97706;transform:translateY(-1px)}.hint-btn.disabled{cursor:not-allowed;opacity:.6;background:#9ca3af}.hint-icon{font-size:1rem}.hint-text{font-size:.875rem}.hint-count{opacity:.9;font-size:.75rem}.hint-info{text-align:right;min-height:16px;font-size:.75rem}.auto-hint-countdown{color:var(--accent-color);font-weight:600}.no-hints{color:var(--danger-color);font-weight:500}.progress-bar{background:#e5e7eb;border-radius:3px;width:100%;height:6px;margin-top:.25rem;overflow:hidden}.progress-fill{background:linear-gradient(90deg,var(--secondary-color)0%,#059669 100%);border-radius:3px;height:100%;transition:width .3s}.completion-stats{border-top:2px solid var(--card-border);text-align:center;margin-top:1rem;padding-top:1rem}.completion-message{color:var(--secondary-color);margin-bottom:.5rem;font-size:1.1rem;font-weight:600}.final-stats{color:#6b7280;flex-wrap:wrap;justify-content:center;gap:1rem;font-size:.875rem;display:flex}.game-area{flex:1;justify-content:center;align-items:center;width:100%;min-height:0;padding:0;display:flex;overflow:hidden}.game-board{background:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--shadow);width:fit-content;max-width:100%;height:fit-content;max-height:100%;margin:0 auto;padding:.5rem}.memory-card{width:var(--card-size);height:var(--card-size);perspective:1000px;cursor:pointer;border-radius:var(--border-radius);transition:var(--transition)}.memory-card.clickable:hover{transform:scale(1.05)}.memory-card.clickable:focus{outline:3px solid var(--primary-color);outline-offset:2px}.memory-card.highlighted{animation:1s ease-in-out infinite alternate highlight-pulse}@keyframes highlight-pulse{0%{box-shadow:0 0 0 3px #f59e0b80}to{box-shadow:0 0 0 6px #f59e0bcc}}.card-inner{text-align:center;width:100%;height:100%;transform-style:preserve-3d;border-radius:var(--border-radius);transition:transform .6s;position:relative}.memory-card.flipped .card-inner{transform:rotateY(180deg)}.card-front,.card-back{backface-visibility:hidden;border-radius:var(--border-radius);width:100%;height:100%;box-shadow:var(--shadow);border:2px solid var(--card-border);justify-content:center;align-items:center;display:flex;position:absolute}.card-front{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.card-back{background:var(--card-bg);transform:rotateY(180deg)}.card-back-pattern{opacity:.8;font-size:2rem;font-weight:700}.card-emoji{font-size:calc(var(--card-size)*.4);line-height:1}.card-back.matched-card{color:#fff!important;background:linear-gradient(135deg,#10b981 0%,#059669 100%)!important;border:3px solid #059669!important}.memory-card.match-success{animation:.6s ease-out match-celebration}.memory-card.fade-out{opacity:0;pointer-events:none;transition:opacity .6s ease-out,transform .6s ease-out;transform:scale(.8)}@keyframes match-celebration{0%{transform:scale(1);box-shadow:0 0 #10b981b3}50%{transform:scale(1.1);box-shadow:0 0 0 10px #10b9814d}to{transform:scale(1);box-shadow:0 0 #10b98100}}.victory-screen{z-index:1000;background:#000c;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.victory-content{background:var(--card-bg);border-radius:var(--border-radius);text-align:center;width:100%;max-width:400px;box-shadow:var(--shadow-lg);padding:2rem;animation:.5s ease-out victory-appear}@keyframes victory-appear{0%{opacity:0;transform:scale(.8)translateY(-20px)}to{opacity:1;transform:scale(1)translateY(0)}}.victory-title{color:var(--secondary-color);margin:0 0 1rem;font-size:2rem;font-weight:700}.victory-message{color:var(--text-color);margin-bottom:1.5rem;font-size:1.1rem}.victory-stats{margin-bottom:2rem}.stat-row{border-bottom:1px solid var(--card-border);justify-content:space-between;align-items:center;padding:.5rem 0;display:flex}.stat-row:last-child{border-bottom:none}.victory-actions{gap:1rem;margin-bottom:1rem;display:flex}.victory-btn{border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);border:none;flex:1;padding:.75rem 1rem;font-size:1rem;font-weight:600}.victory-btn.primary{background:var(--primary-color);color:#fff}.victory-btn.primary:hover{background:#4338ca}.victory-btn.secondary{background:var(--card-border);color:var(--text-color)}.victory-btn.secondary:hover{background:#d1d5db}.victory-encouragement{color:#6b7280;margin:0;font-size:.9rem}.game-instructions{text-align:center;border-radius:var(--border-radius);color:#92400e;background:#fef3c7;border:2px solid #fbbf24;padding:1rem;font-weight:600}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (max-width:1200px){.memory-game{--card-size:min(100px,10vw);--board-max-width:900px}}@media (max-width:768px){.memory-game{padding:.5rem}.game-top-panel{flex-direction:column;gap:1rem;min-height:auto;margin-bottom:1rem;padding:1rem}.panel-section{justify-content:center;width:100%}.panel-progress{order:1;width:100%;min-width:0}.panel-controls{order:2;justify-content:space-between;gap:1rem;width:100%;margin-left:0}.panel-hint{order:3;justify-content:center;align-items:center;width:100%}.btn-text,.hint-text{display:inline}.progress-text,.time-display{font-size:1rem}.game-instruction{display:none}.difficulty-select{min-width:120px;padding:.75rem;font-size:1rem}.new-game-btn,.hint-btn{padding:.75rem 1rem;font-size:1rem}.btn-icon,.hint-icon{font-size:1.25rem}.progress-bar{height:6px}.victory-actions{flex-direction:column}}@media (max-width:480px){.memory-game{padding:.25rem}.game-top-panel{gap:.75rem;padding:.75rem}.panel-progress{min-width:0}.panel-controls{gap:.75rem}.panel-hint{min-width:0}.progress-text,.time-display{font-size:.875rem}.difficulty-select{min-width:100px;padding:.5rem;font-size:.875rem}.btn-icon,.hint-icon{font-size:1rem}.panel-controls{flex-direction:column;gap:.75rem}.difficulty-select{min-width:120px}.btn-text,.hint-text{display:none}.new-game-btn,.hint-btn{padding:.25rem .5rem;font-size:.7rem}}@media (prefers-contrast:high){.memory-card{border:3px solid}.card-front{color:#fff;background:#000}.card-back{color:#000;background:#fff;border:3px solid #000}}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.card-inner{transition:none}.memory-card.clickable:hover{transform:none}}
