*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #f1f5f9;--secondary-color: #e2e8f0;--card-bg: #ffffff;--card-shadow: rgba(0, 0, 0, .15);--win-color: #22c55e;--lose-color: #94a3b8;--text-color: #334155;--button-color: #65a572;--button-hover: #4f7c5a}html{font-size:16px;touch-action:manipulation}body{font-family:Pretendard Variable,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;color:var(--text-color);background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);min-height:100vh;min-height:100svh;height:100vh;height:100svh;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:none;overscroll-behavior:none;-webkit-overflow-scrolling:touch;position:fixed;width:100%;top:0;left:0}#root{width:100%;min-height:100vh;min-height:100svh;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;padding:1rem;padding:clamp(.5rem,2vw,1rem)}button{border-radius:12px;border:none;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;font-family:inherit;background-color:var(--button-color);color:#fff;cursor:pointer;transition:all .25s ease;box-shadow:0 4px 12px #3b82f64d;min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:hover{background-color:var(--button-hover);transform:translateY(-2px);box-shadow:0 6px 16px #3b82f666}button:active{transform:translateY(0);box-shadow:0 2px 8px #3b82f64d}button:focus{outline:2px solid var(--button-color);outline-offset:2px}@media (max-width: 480px){html{font-size:14px}#root{padding:.5rem;min-height:100vh;min-height:100svh;height:100vh;height:100svh}button{padding:.875rem 1.75rem;font-size:1.1rem}}@media (min-width: 481px) and (max-width: 768px){html{font-size:15px}}@media (min-width: 769px){html{font-size:16px}}.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.preserve-3d{transform-style:preserve-3d}.gpu-accelerated{will-change:transform;transform:translateZ(0);backface-visibility:hidden}.touch-target{min-height:44px;min-width:44px}@media (prefers-contrast: high){.card-face{border:3px solid currentColor!important}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.card-container{position:absolute;width:180px;height:280px;cursor:pointer;transition:all .8s cubic-bezier(.25,.46,.45,.94);transform:translate(var(--card-x),var(--card-y)) rotate(var(--card-rotation));z-index:1;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation}.card-container.moving-to-center{transform:translate(0) rotate(0) scale(1.3);z-index:10;transition:all .8s cubic-bezier(.34,1.56,.64,1)}.card-container.selected{z-index:10}.card-container.disabled{cursor:default;pointer-events:none}.card{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.175,.885,.32,1.275)}.card-container.flipped .card{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 25px var(--card-shadow);border:2px solid rgba(255,255,255,.2)}.card-front{background:var(--front-color);transform:rotateY(0)}.card-back{background:var(--card-bg);transform:rotateY(180deg);color:var(--text-color)}.card-back.win{background:linear-gradient(135deg,var(--back-win-color) 0%,rgba(16,185,129,.9) 100%);color:#fff;box-shadow:0 0 30px #10b98166}.card-back.lose{background:linear-gradient(135deg,var(--back-lose-color) 0%,rgba(239,68,68,.9) 100%);color:#fff;box-shadow:0 0 30px #ef444466}.card-pattern{position:relative;width:80%;height:80%;display:flex;align-items:center;justify-content:center}.pattern-circle{width:70px;height:70px;border:4px solid rgba(255,255,255,.3);border-radius:50%;position:absolute;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}.pattern-logo{width:50px;height:50px;object-fit:contain;opacity:.8}.pattern-lines{display:none}.result-content{text-align:center;animation:resultPop .5s cubic-bezier(.68,-.55,.265,1.55) .3s both;padding:.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.cat-image{width:120px;height:120px;margin-bottom:.8rem;border-radius:16px;overflow:hidden;box-shadow:0 3px 12px #0000004d}.cat-image img{width:100%;height:100%;object-fit:cover}.result-message{font-size:1rem;font-weight:600;line-height:1.5;text-shadow:0 1px 3px rgba(0,0,0,.4);word-break:keep-all;overflow-wrap:break-word;text-align:center;padding:0 .5rem;max-width:100%;white-space:pre-line}.card-container:not(.disabled):not(.selected):hover{transform:translate(var(--card-x),var(--card-y)) rotate(var(--card-rotation)) translateY(-10px);transition:all .3s ease}.card-container:not(.disabled):not(.selected):hover .card-face{box-shadow:0 12px 35px #00000040}@media (max-width: 480px){.card-container{width:160px;height:240px}.card-container.moving-to-center{transform:translate(0) rotate(0) scale(1.3)}.pattern-circle{width:55px;height:55px}.pattern-logo{width:35px;height:35px}.line{width:25px}.cat-image{width:100px;height:100px}.result-message{font-size:.85rem}}@media (min-width: 769px){.card-container{width:200px;height:320px}.pattern-circle{width:80px;height:80px}.pattern-logo{width:60px;height:60px}.cat-image{width:140px;height:140px}.result-message{font-size:1.2rem}}@keyframes resultPop{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.card-container,.card,.card-face{will-change:transform}@media (prefers-reduced-motion: reduce){.card-container,.card,.card-face,.result-content{transition-duration:.01ms!important;animation-duration:.01ms!important}}.game-board{width:100%;max-width:800px;margin:0 auto;padding:1rem;display:flex;flex-direction:column;align-items:center;gap:2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;touch-action:none;overflow:hidden}.game-header{text-align:center;margin-bottom:1rem}.game-title{font-size:2.5rem;font-weight:800;color:#65856b;text-shadow:0 2px 4px rgba(0,0,0,.1);margin-bottom:1rem}.game-message-container{min-height:100px;display:flex;flex-direction:column;justify-content:center;gap:.5rem}.game-message{font-size:1.3rem;font-weight:600;color:#65856b;text-shadow:0 1px 3px rgba(0,0,0,.1);margin:0;transition:all .3s ease}.game-instructions{font-size:1rem;color:#65856bcc;text-shadow:0 1px 2px rgba(0,0,0,.1);margin:0;opacity:.9}.game-container{position:relative;width:100%;height:400px;display:flex;align-items:center;justify-content:center;margin:2rem 0}.cards-area{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.game-controls{display:flex;gap:1rem;margin-top:1rem;min-height:80px;align-items:center;justify-content:center}.start-button,.restart-button{padding:1rem 2rem;font-size:1.2rem;font-weight:700;border-radius:16px;border:none;cursor:pointer;transition:all .3s cubic-bezier(.25,.46,.45,.94);text-transform:uppercase;letter-spacing:1px;min-width:160px;position:relative;overflow:hidden}.start-button{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 6px 20px #10b98166}.restart-button{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;box-shadow:0 6px 20px #f59e0b66}.start-button:hover,.restart-button:hover{transform:translateY(-3px);box-shadow:0 8px 25px #0000004d}.start-button:active,.restart-button:active{transform:translateY(-1px)}.result-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100;animation:overlayFadeIn .5s ease-in-out}.result-overlay.win{background:radial-gradient(circle,rgba(16,185,129,.1) 0%,transparent 70%)}.result-overlay.lose{background:radial-gradient(circle,rgba(239,68,68,.1) 0%,transparent 70%)}.confetti{position:absolute;top:0;left:0;width:100%;height:100%}.confetti-piece{position:absolute;width:8px;height:8px;background:linear-gradient(45deg,#ff6b6b,#4ecdc4,#45b7d1,#96ceb4,#ffeaa7);animation:confettiFall 3s linear infinite}.confetti-piece:nth-child(1){left:10%;animation-delay:0s;background:#ff6b6b}.confetti-piece:nth-child(2){left:20%;animation-delay:.1s;background:#4ecdc4}.confetti-piece:nth-child(3){left:30%;animation-delay:.2s;background:#45b7d1}.confetti-piece:nth-child(4){left:40%;animation-delay:.3s;background:#96ceb4}.confetti-piece:nth-child(5){left:50%;animation-delay:.4s;background:#ffeaa7}.confetti-piece:nth-child(6){left:60%;animation-delay:.5s;background:#ff6b6b}.confetti-piece:nth-child(7){left:70%;animation-delay:.6s;background:#4ecdc4}.confetti-piece:nth-child(8){left:80%;animation-delay:.7s;background:#45b7d1}.confetti-piece:nth-child(9){left:90%;animation-delay:.8s;background:#96ceb4}.confetti-piece:nth-child(10){left:15%;animation-delay:.9s;background:#ffeaa7}.confetti-piece:nth-child(11){left:25%;animation-delay:1s;background:#ff6b6b}.confetti-piece:nth-child(12){left:35%;animation-delay:1.1s;background:#4ecdc4}.confetti-piece:nth-child(13){left:45%;animation-delay:1.2s;background:#45b7d1}.confetti-piece:nth-child(14){left:55%;animation-delay:1.3s;background:#96ceb4}.confetti-piece:nth-child(15){left:65%;animation-delay:1.4s;background:#ffeaa7}.confetti-piece:nth-child(16){left:75%;animation-delay:1.5s;background:#ff6b6b}.confetti-piece:nth-child(17){left:85%;animation-delay:1.6s;background:#4ecdc4}.confetti-piece:nth-child(18){left:95%;animation-delay:1.7s;background:#45b7d1}.confetti-piece:nth-child(19){left:5%;animation-delay:1.8s;background:#96ceb4}.confetti-piece:nth-child(20){left:50%;animation-delay:1.9s;background:#ffeaa7}.sad-particles{position:absolute;top:20%;left:0;width:100%;height:100%}.sad-particle{position:absolute;font-size:1.5rem;animation:sadFall 2s ease-in infinite}.sad-particle:nth-child(1){left:20%;animation-delay:0s}.sad-particle:nth-child(2){left:40%;animation-delay:.2s}.sad-particle:nth-child(3){left:60%;animation-delay:.4s}.sad-particle:nth-child(4){left:80%;animation-delay:.6s}.sad-particle:nth-child(5){left:30%;animation-delay:.8s}.sad-particle:nth-child(6){left:50%;animation-delay:1s}.sad-particle:nth-child(7){left:70%;animation-delay:1.2s}.sad-particle:nth-child(8){left:10%;animation-delay:1.4s}.sad-particle:nth-child(9){left:90%;animation-delay:1.6s}.sad-particle:nth-child(10){left:25%;animation-delay:1.8s}@media (max-width: 480px){.game-board{padding:.5rem;gap:1.5rem}.game-title{font-size:2rem}.game-message{font-size:1.1rem}.game-instructions{font-size:.9rem}.game-container{height:300px;height:min(300px,40svh);margin:1rem 0}.start-button,.restart-button{padding:.875rem 1.5rem;font-size:1rem;min-width:140px}}@media (min-width: 769px){.game-title{font-size:3rem}.game-message{font-size:1.5rem}.game-container{height:500px}}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}@keyframes confettiFall{0%{transform:translateY(-100vh) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(360deg);opacity:0}}@keyframes sadFall{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(300px) scale(.5);opacity:0}}.result-overlay,.confetti,.confetti-piece,.sad-particles,.sad-particle{will-change:transform,opacity}@media (prefers-reduced-motion: reduce){.result-overlay,.confetti-piece,.sad-particle{animation:none!important}.result-overlay{display:none}}.app{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:0;margin:0}