*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Segoe UI','Apple SD Gothic Neo','Malgun Gothic',-apple-system,BlinkMacSystemFont,sans-serif;background:#f8fafc;min-height:100vh;color:#2d3748;overflow-x:hidden;font-weight:400;line-height:1.6;position:relative}.character-mosaic{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;opacity:.2;display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));grid-template-rows:repeat(auto-fit,minmax(80px,1fr));gap:4px;padding:20px;pointer-events:none;overflow:hidden}.character-mosaic img{width:100%;height:100%;object-fit:cover;border-radius:6px;transition:opacity .3s;filter:grayscale(30%) blur(.5px)}.character-mosaic.loaded{animation:2s ease-in-out mosaicFadeIn}@keyframes mosaicFadeIn{from{opacity:0}to{opacity:.2}}h2{color:#2b6cb0;font-weight:700}.container{max-width:1200px;margin:0 auto;padding:20px;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.screen{display:none;width:100%;opacity:0;transform:translateY(20px);transition:.4s cubic-bezier(.4, 0, .2, 1)}.screen.active{display:block;opacity:1;transform:translateY(0)}.btn{padding:14px 28px;font-size:16px;font-weight:600;border:none;border-radius:12px;cursor:pointer;transition:.3s cubic-bezier(.4, 0, .2, 1);text-transform:none;letter-spacing:.025em;margin:6px;position:relative;overflow:hidden;backdrop-filter:blur(10px)}.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.btn:hover::before{left:100%}.btn.primary{background:linear-gradient(135deg,#4299e1 0,#3182ce 100%);color:#fff;box-shadow:0 4px 6px -1px rgba(66,153,225,.2),0 2px 4px -1px rgba(66,153,225,.1)}.btn.primary:hover:not(:disabled){background:linear-gradient(135deg,#667eea 0,#764ba2 100%);transform:translateY(-2px);box-shadow:0 8px 12px -2px rgba(102,126,234,.25),0 4px 6px -1px rgba(102,126,234,.15)}.btn.secondary{background:#fff;color:#4a5568;border:1px solid #e2e8f0;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.btn.secondary:hover{background:#f7fafc;border-color:#cbd5e0;transform:translateY(-1px);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.btn.small{padding:10px 20px;font-size:14px}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important;box-shadow:none!important}.game-title{font-size:3.5rem;color:#2b6cb0;text-align:center;margin-bottom:40px;font-weight:800;line-height:1.1;letter-spacing:-.025em}.level-selection{background:#fff;backdrop-filter:blur(10px);padding:35px;border-radius:20px;margin-bottom:30px;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);width:100%;max-width:600px;border:2px solid #4299e1}.level-selection h2{text-align:center;margin-bottom:25px;color:#2b6cb0;font-size:1.75rem;font-weight:700;letter-spacing:-.025em}.level-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px}.level-btn{padding:16px 24px;font-size:15px;font-weight:600;border:2px solid #4299e1;border-radius:8px;background:#fff;cursor:pointer;transition:.3s;color:#2b6cb0;letter-spacing:.025em;position:relative;overflow:hidden}.level-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s}.level-btn:hover::before{left:100%}.level-btn:hover{border-color:#3182ce;background:#ebf8ff;transform:translateY(-2px);box-shadow:0 6px 12px -2px rgba(66,153,225,.25),0 4px 6px -1px rgba(66,153,225,.15)}.level-btn.selected{border-color:#764ba2;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:#fff;box-shadow:0 0 0 3px rgba(102,126,234,.3),0 4px 6px -1px rgba(102,126,234,.2);font-weight:700;transform:translateY(-1px)}.menu-buttons{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}.game-header{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:900px;background:#fff;backdrop-filter:blur(10px);padding:24px;border-radius:20px;margin-bottom:24px;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);border:1px solid #667eea}.game-info{display:flex;gap:30px;flex-wrap:wrap}.info-item{display:flex;flex-direction:column;align-items:center}.info-item .label{font-size:11px;color:#718096;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;font-weight:600}.info-item span:last-child{font-size:22px;font-weight:700;color:#667eea}.game-controls{display:flex;gap:10px}.game-board{display:grid;gap:15px;justify-content:center;max-width:1000px;width:100%;padding:20px}.game-board.level-1,.game-board.level-2{grid-template-columns:repeat(4,1fr)}.game-board.level-3,.game-board.level-4{grid-template-columns:repeat(5,1fr)}.game-board.level-5,.game-board.level-6{grid-template-columns:repeat(6,1fr)}.card{aspect-ratio:1;border-radius:16px;cursor:pointer;position:relative;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4, 0, .2, 1);min-width:100px;max-width:180px;margin:0 auto;width:100%;filter:drop-shadow(0 10px 8px rgba(0, 0, 0, .04)) drop-shadow(0 4px 3px rgba(0, 0, 0, .1))}.card:hover{transform:translateY(-2px);filter:drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(102, 126, 234, .15));border:1px solid rgba(102,126,234,.3)}.card.matched{opacity:.4;transform:scale(.95);pointer-events:none;filter:grayscale(20%) drop-shadow(0 4px 3px rgba(0, 0, 0, .07))}.card-face{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:16px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.2)}.card-back{transform:rotateY(0)}.card-front{background:#fff;transform:rotateY(180deg);padding:6px;border:2px solid #4299e1}.card.flipped .card-back{transform:rotateY(180deg)}.card.flipped .card-front{transform:rotateY(0)}.card-back{background:linear-gradient(135deg,#2d3748 0,#1a202c 100%);color:#fff;font-size:32px;font-weight:800;text-shadow:0 2px 4px rgba(0,0,0,.3);position:relative;overflow:hidden;border:2px solid #4299e1}.card-back::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(66,153,225,.3) 0,transparent 70%);animation:3s infinite shimmer}@keyframes shimmer{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.card-front img{width:100%;height:100%;object-fit:cover;border-radius:12px}.result-stats{background:#fff;backdrop-filter:blur(10px);padding:35px;border-radius:20px;margin:25px 0;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);width:100%;max-width:520px;border:2px solid #667eea;transform:scale(.9) translateY(20px);animation:.6s cubic-bezier(.34,1.56,.64,1) .3s forwards resultAppear;opacity:0}@keyframes resultAppear{from{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.stat-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #eee}.stat-item:last-child{border-bottom:none}.stat-item.big{font-size:1.2em;font-weight:700;color:#667eea;margin-top:20px;padding-top:20px;border-top:2px solid #667eea;border-bottom:none}.stat-label{color:#666}.result-buttons{display:flex;gap:15px;flex-wrap:wrap;justify-content:center}.level-selector{background:#fff;backdrop-filter:blur(10px);padding:20px;border-radius:16px;margin-bottom:25px;text-align:center;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);border:1px solid #4299e1;transform:translateY(10px);animation:.6s cubic-bezier(.4,0,.2,1) forwards slideUp}@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.level-selector label{display:inline-block;margin-right:10px;font-weight:700;color:#333}.level-selector select{padding:8px 15px;font-size:16px;border:2px solid #ddd;border-radius:8px;outline:0;background:#fff;transition:border-color .3s}.level-selector select:focus{border-color:#4299e1}.ranking-list{background:#fff;backdrop-filter:blur(10px);border-radius:20px;padding:25px;width:100%;max-width:720px;margin-bottom:25px;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);border:1px solid #4299e1;transform:translateY(20px);animation:.8s cubic-bezier(.4,0,.2,1) .2s forwards slideUp;opacity:0}.ranking-list.loaded{opacity:1;transform:translateY(0)}.ranking-item{display:grid;grid-template-columns:50px 2fr 80px 80px 80px 100px;gap:15px;padding:15px;border-bottom:1px solid #eee;align-items:center;font-size:14px}.ranking-item:last-child{border-bottom:none}.ranking-item.header{font-weight:700;color:#2d3748;background:#f7fafc;border-radius:8px;border-bottom:2px solid #4299e1}.ranking-item.gold-rank{background:gold;border-radius:8px;font-weight:700;color:#b45309;box-shadow:0 0 10px rgba(255,215,0,.5)}.ranking-item.silver-rank{background:#e2e8f0;border-radius:8px;font-weight:700;color:#2d3748;border:1px solid #cbd5e0}.ranking-item.bronze-rank{background:#d4af37;border-radius:8px;font-weight:700;color:#744210}.ranking-item.new-entry{background:#ebf8ff;border-radius:8px;font-weight:700;color:#2b6cb0;animation:1s ease-in-out infinite alternate newEntryPulse;box-shadow:0 0 15px rgba(66,153,225,.7);border:2px solid #4299e1}@keyframes newEntryPulse{from{transform:scale(1)}to{transform:scale(1.02)}}.ranking-rank{text-align:center;font-weight:700}.ranking-name{font-weight:500;word-wrap:break-word;overflow-wrap:break-word;min-width:0;white-space:normal;line-height:1.2}.ranking-score{text-align:center;font-weight:700;color:#2d3748}.ranking-clicks,.ranking-date,.ranking-time{text-align:center;color:#666}.ranking-empty{text-align:center;color:#666;font-style:italic;padding:40px}.ranking-buttons{text-align:center}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);backdrop-filter:blur(8px);opacity:0;transition:.3s cubic-bezier(.4, 0, .2, 1)}.modal.active{display:flex;align-items:center;justify-content:center;opacity:1}.modal-content{background:#fff;backdrop-filter:blur(10px);padding:35px;border-radius:20px;text-align:center;max-width:400px;width:90%;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);border:2px solid #667eea;transform:scale(.8);transition:transform .3s cubic-bezier(.34, 1.56, .64, 1)}.modal.active .modal-content{transform:scale(1)}.modal-content h3{margin-bottom:20px;color:#2b6cb0;font-weight:700}.modal-content input{width:100%;padding:12px;font-size:16px;border:2px solid #ddd;border-radius:8px;margin-bottom:20px;outline:0;transition:border-color .3s}.modal-content input:focus{border-color:#4299e1}.modal-buttons{display:flex;gap:15px;justify-content:center}.ranking-modal-content{max-width:720px;width:95%;max-height:85vh;overflow-y:auto;transform:scale(.8) translateY(50px);transition:.4s cubic-bezier(.34, 1.56, .64, 1)}.modal.active .ranking-modal-content{transform:scale(1) translateY(0)}.ranking-score-info{text-align:center;margin-bottom:20px;padding:15px;background:linear-gradient(135deg,#4299e1,#3182ce);color:#fff;border-radius:10px}.ranking-score-info p{margin:0 0 10px;font-size:16px}.score-display{font-size:24px;font-weight:700}.ranking-preview{max-height:300px;overflow-y:auto;margin-bottom:20px;border:2px solid #ddd;border-radius:10px}.ranking-preview .ranking-item{font-size:12px;padding:8px}.ranking-preview .ranking-item.header{position:sticky;top:0;z-index:10}.name-input-section{text-align:center;margin-bottom:20px}.name-input-section label{display:block;margin-bottom:10px;font-weight:700;color:#333}.name-input-section input{width:250px;padding:12px;font-size:16px;border:2px solid #ddd;border-radius:8px;text-align:center;outline:0;transition:border-color .3s}.name-input-section input:focus{border-color:#4299e1}.loading{display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;background:rgba(248,250,252,.95);align-items:center;justify-content:center;backdrop-filter:blur(10px);opacity:0;transition:opacity .3s}.loading.active{display:flex;opacity:1}.loading-content{text-align:center;color:#fff;transform:scale(.8);animation:2s ease-in-out infinite loadingPulse}.spinner{width:60px;height:60px;border:4px solid rgba(255,255,255,.2);border-top:4px solid #fff;border-right:4px solid rgba(255,255,255,.6);border-radius:50%;animation:1.2s cubic-bezier(.4,0,.2,1) infinite spin;margin:0 auto 25px;box-shadow:0 0 20px rgba(255,255,255,.3)}.loading-content p{font-size:1.1rem;font-weight:500;letter-spacing:.025em;text-shadow:0 2px 4px rgba(0,0,0,.3)}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes loadingPulse{0%,100%{transform:scale(.8)}50%{transform:scale(.9)}}.character-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.95);backdrop-filter:blur(20px);color:#2d3748;padding:25px 35px;border-radius:20px;text-align:center;z-index:1000;box-shadow:0 20px 40px rgba(0,0,0,.15),0 8px 16px rgba(0,0,0,.1);border:3px solid #4299e1;opacity:0;transform:translate(-50%,-50%) scale(.3);transition:.4s cubic-bezier(.34, 1.56, .64, 1);pointer-events:none;max-width:85vw;max-height:75vh;display:flex;flex-direction:column;align-items:center;gap:20px}.character-overlay-image{width:240px;height:240px;border-radius:16px;overflow:hidden;background:#f8fafc;display:flex;align-items:center;justify-content:center;border:2px solid #e2e8f0;box-shadow:0 4px 8px rgba(0,0,0,.1),inset 0 1px 2px rgba(255,255,255,.5)}.character-overlay-image img{width:100%;height:100%;object-fit:cover;border-radius:16px}.character-overlay-name{font-size:1.4rem;font-weight:700;white-space:normal;word-break:break-word;line-height:1.3;overflow-wrap:break-word;hyphens:auto;letter-spacing:.02em;color:#2d3748}.character-overlay.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.character-overlay.hide{opacity:0;transform:translate(-50%,-50%) scale(1.2)}@media (max-width:768px){.character-mosaic{grid-template-columns:repeat(auto-fit,minmax(60px,1fr));grid-template-rows:repeat(auto-fit,minmax(60px,1fr));gap:3px;padding:15px}.container{padding:15px}.game-title{font-size:2rem}.game-header{flex-direction:column;gap:15px}.game-info{gap:20px}.card{min-width:70px;max-width:100px}.level-buttons{grid-template-columns:repeat(2,1fr)}.ranking-item{grid-template-columns:30px 2fr 50px 50px 50px;gap:8px;font-size:12px}.modal-content{width:95%;padding:20px}.character-overlay{padding:20px 25px;max-width:90%;gap:15px;border-width:2px}.character-overlay-image{width:160px;height:160px;border-width:1px}.character-overlay-name{font-size:1.1rem;line-height:1.3}}@media (max-width:480px){.character-mosaic{grid-template-columns:repeat(auto-fit,minmax(50px,1fr));grid-template-rows:repeat(auto-fit,minmax(50px,1fr));gap:2px;padding:10px}.game-title{font-size:1.5rem}.btn{padding:10px 20px;font-size:14px}.card{min-width:60px;max-width:80px}.game-board{gap:10px;padding:15px}.game-board.level-5,.game-board.level-6{grid-template-columns:repeat(4,1fr)}.character-overlay{padding:15px 20px;max-width:95%;gap:12px;border-width:2px}.character-overlay-image{width:120px;height:120px;border-width:1px}.character-overlay-name{font-size:1rem;line-height:1.4}}