.home-container{flex-direction:column;min-height:100vh;font-family:Segoe UI,sans-serif;display:flex;overflow-y:auto}.home-header{color:#fff;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#ff6f91 0%,#ff9a76 100%);justify-content:space-between;align-items:center;padding:.8rem 2rem;display:flex;position:sticky;top:0;box-shadow:0 4px 20px #ff6f914d}.logo{letter-spacing:1px;font-size:1.6rem;font-weight:700;animation:.6s fadeInLeft}.user-section{position:relative}.user-avatar{cursor:pointer;border:2.5px solid #fffc;border-radius:50%;width:42px;height:42px;transition:transform .3s,box-shadow .3s}.user-avatar:hover{transform:scale(1.1);box-shadow:0 0 12px #ffffff80}.dropdown-menu{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#333;z-index:1000;background:#fffffff2;border-radius:12px;min-width:180px;padding:.4rem 0;list-style:none;animation:.25s dropDown;position:absolute;top:54px;right:0;box-shadow:0 8px 30px #00000026}.dropdown-item{cursor:pointer;white-space:nowrap;padding:.6rem 1.2rem;font-size:.9rem;transition:background-color .2s}.dropdown-item.user-info{cursor:default;color:#888;border-bottom:1px solid #eee;font-size:.82rem}.dropdown-item.logout-btn:hover{color:#d94f4f;background-color:#fff0f0}.home-main{z-index:1;flex-direction:column;flex:1;align-items:center;padding:2.5rem 2rem 4rem;display:flex;position:relative}.greeting-section{text-align:center;margin-bottom:2.5rem;animation:.7s fadeInUp}.greeting-text{color:#2d2d2d;text-shadow:0 1px 4px #ffffff4d;margin:0 0 .4rem;font-size:1.8rem;font-weight:600}.greeting-name{background:linear-gradient(135deg,#ff6f91,#d94f4f);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-weight:700}.greeting-sub{color:#555;margin:0;font-size:1rem}.card-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.2rem;width:100%;max-width:800px;display:grid}.function-card{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);text-align:center;cursor:pointer;background:#ffffffbf;border:1px solid #ffb6c166;border-radius:16px;padding:1.8rem 1.2rem;transition:transform .3s,box-shadow .3s,background .3s;animation:.5s both cardAppear}.function-card:hover{background:#ffffffe6;transform:translateY(-6px)scale(1.02);box-shadow:0 12px 32px #ff6f9140}.card-icon{margin-bottom:.6rem;font-size:2.4rem;transition:transform .3s;display:block}.function-card:hover .card-icon{animation:.5s bounce;transform:scale(1.2)rotate(-5deg)}.card-label{color:#2d2d2d;margin:0 0 .3rem;font-size:1rem;font-weight:600}.card-desc{color:#777;margin:0;font-size:.82rem}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:translate(0)}}@keyframes cardAppear{0%{opacity:0;transform:translateY(30px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes dropDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:scale(1.2)rotate(-5deg)}50%{transform:scale(1.35)rotate(0)}}.shooting-star-background{z-index:0;pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.shooting-star{width:calc(3px * var(--star-scale,1));height:calc(120px * var(--star-scale,1));transform:rotate(var(--star-angle,45deg));animation:shoot var(--star-duration,2.5s) linear forwards;background:linear-gradient(to bottom, var(--star-tail,#ffa0c400) 0%, var(--star-head,#ffa0c4) 70%, #fff 100%);filter:blur(.5px);border-radius:2px;position:absolute}.shooting-star:before{content:"";width:calc(6px * var(--star-scale,1));height:calc(6px * var(--star-scale,1));box-shadow:0 0 6px 2px var(--star-head,#ffa0c4), 0 0 14px 4px var(--star-head,#ffa0c4);background:#fff;border-radius:50%;position:absolute;bottom:-3px;left:50%;transform:translate(-50%)}.shooting-star:after{content:"";width:calc(2px * var(--star-scale,1));height:calc(40px * var(--star-scale,1));background:linear-gradient(to bottom, transparent, var(--star-head,#ffa0c4));opacity:.4;filter:blur(2px);position:absolute;top:20%;left:50%;transform:translate(-50%)}@keyframes shoot{0%{transform:translate(0, 0) rotate(var(--star-angle,45deg));opacity:0}5%{opacity:1}70%{opacity:.8}to{transform:translate(-400px, 700px) rotate(var(--star-angle,45deg));opacity:0}}.cat-animation-container{z-index:1000;pointer-events:none;animation:12s linear infinite catWalk;position:fixed;bottom:0}.cat-image{filter:drop-shadow(0 2px 4px #00000026);mix-blend-mode:multiply;width:80px;height:auto}@keyframes catWalk{0%{left:-100px;transform:scaleX(1)}45%{left:calc(100vw + 20px);transform:scaleX(1)}50%{left:calc(100vw + 20px);transform:scaleX(-1)}95%{left:-100px;transform:scaleX(-1)}to{left:-100px;transform:scaleX(1)}}.sub-page{flex-direction:column;min-height:100vh;display:flex}.sub-header{color:#fff;z-index:100;background:linear-gradient(135deg,#ff6f91 0%,#ff9a76 100%);justify-content:space-between;align-items:center;padding:.8rem 2rem;display:flex;position:sticky;top:0;box-shadow:0 4px 20px #ff6f914d}.sub-header .logo{cursor:pointer;letter-spacing:1px;font-size:1.6rem;font-weight:700}.back-btn{color:#fff;cursor:pointer;background:#fff3;border:1px solid #fff6;border-radius:8px;padding:.4rem 1rem;font-size:.9rem;transition:background .2s}.back-btn:hover{background:#ffffff59}.sub-content{box-sizing:border-box;z-index:1;flex:1;width:100%;max-width:960px;margin:0 auto;padding:2rem;position:relative}.page-title{color:#2d2d2d;margin:0 0 .3rem;font-size:1.6rem;font-weight:700}.page-subtitle{color:#777;margin:0 0 2rem;font-size:.95rem}.info-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffc;border:1px solid #ffb6c14d;border-radius:14px;margin-bottom:1rem;padding:1.4rem;animation:.4s both slideUp}.info-card h3{color:#2d2d2d;margin:0 0 .5rem;font-size:1.05rem}.info-card p{color:#555;margin:0;font-size:.9rem;line-height:1.5}.stat-row{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-bottom:1.5rem;display:grid}.stat-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:center;background:#ffffffd9;border:1px solid #ffb6c14d;border-radius:14px;padding:1.2rem;animation:.4s both slideUp}.stat-icon{margin-bottom:.4rem;font-size:1.8rem;display:block}.stat-value{color:#d94f4f;font-size:1.6rem;font-weight:700;display:block}.stat-label{color:#777;font-size:.8rem}.data-table{border-collapse:collapse;width:100%;font-size:.9rem}.data-table th{text-align:left;color:#888;border-bottom:2px solid #f0c0c8;padding:.6rem .8rem;font-size:.82rem;font-weight:600}.data-table td{color:#444;border-bottom:1px solid #f5e0e4;padding:.6rem .8rem}.data-table tr:hover td{background:#ffb6c11a}.badge{border-radius:12px;padding:.15rem .6rem;font-size:.75rem;font-weight:600;display:inline-block}.badge-success{color:#155724;background:#d4edda}.badge-warning{color:#856404;background:#fff3cd}.badge-danger{color:#721c24;background:#f8d7da}.badge-info{color:#0c5460;background:#d1ecf1}.list-item{border-bottom:1px solid #f5e0e4;align-items:flex-start;gap:1rem;padding:1rem 0;display:flex}.list-item:last-child{border-bottom:none}.list-avatar{flex-shrink:0;font-size:1.6rem}.list-body{flex:1}.list-body h4{color:#2d2d2d;margin:0 0 .2rem;font-size:.95rem}.list-body p{color:#666;margin:0;font-size:.85rem}.list-time{color:#aaa;white-space:nowrap;font-size:.75rem}.setting-group{margin-bottom:1.5rem}.setting-group label{color:#555;margin-bottom:.4rem;font-size:.85rem;font-weight:600;display:block}.setting-input{box-sizing:border-box;border:1px solid #ddd;border-radius:8px;width:100%;padding:.6rem .8rem;font-size:.9rem;transition:border-color .2s}.setting-input:focus{border-color:#ff6f91;outline:none}.toggle-row{border-bottom:1px solid #f5e0e4;justify-content:space-between;align-items:center;padding:.8rem 0;display:flex}.toggle-label{color:#444;font-size:.9rem}.toggle-switch{cursor:pointer;background:#ccc;border-radius:12px;width:44px;height:24px;transition:background .3s;position:relative}.toggle-switch.active{background:#ff6f91}.toggle-switch:after{content:"";background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .3s;position:absolute;top:2px;left:2px}.toggle-switch.active:after{transform:translate(20px)}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.games-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;max-width:800px;display:grid}.game-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:center;cursor:pointer;background:#ffffffd9;border:2px solid #ffb6c14d;border-radius:20px;padding:2rem 1.5rem;transition:transform .3s,box-shadow .3s,border-color .3s;animation:.5s both cardAppear;position:relative;overflow:hidden}.game-card:before{content:"";background:var(--accent,#ff9a9e);border-radius:20px 20px 0 0;height:4px;position:absolute;top:0;left:0;right:0}.game-card:hover{border-color:var(--accent,#ff9a9e);transform:translateY(-8px)scale(1.02);box-shadow:0 16px 40px #0000001f}.game-card-icon{margin-bottom:.8rem;font-size:3.5rem;transition:transform .3s}.game-card:hover .game-card-icon{animation:.5s iconBounce;transform:scale(1.2)rotate(-8deg)}.game-card-title{color:#2d2d2d;margin:0 0 .4rem;font-size:1.2rem;font-weight:700}.game-card-desc{color:#777;margin:0 0 1rem;font-size:.85rem;line-height:1.4}.game-card-play{background:var(--accent,#ff9a9e);color:#fff;border-radius:20px;padding:.4rem 1.2rem;font-size:.85rem;font-weight:600;transition:background .2s,transform .2s;display:inline-block}.game-card:hover .game-card-play{transform:scale(1.05)}@keyframes iconBounce{0%,to{transform:scale(1.2)rotate(-8deg)}50%{transform:scale(1.35)rotate(0)}}.game-container{flex-direction:column;align-items:center;gap:1rem;display:flex}.game-status{flex-wrap:wrap;justify-content:center;align-items:center;gap:2rem;display:flex}.game-stat{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#2d2d2d;background:#ffffffd9;border-radius:12px;padding:.6rem 1.2rem;font-size:.95rem;font-weight:600;box-shadow:0 2px 8px #00000014}.game-btn{cursor:pointer;border:none;border-radius:10px;padding:.6rem 1.6rem;font-size:.95rem;font-weight:600;transition:transform .2s,box-shadow .2s}.game-btn:hover{transform:scale(1.05)}.game-btn-primary{color:#fff;background:linear-gradient(135deg,#ff6f91,#ff9a76);box-shadow:0 4px 12px #ff6f914d}.game-btn-secondary{color:#555;background:#fffc;border:1px solid #ddd}.game-message{color:#2d2d2d;text-align:center;font-size:1.4rem;font-weight:700;animation:.4s fadeInUp}.memory-board{perspective:800px;grid-template-columns:repeat(4,1fr);gap:.8rem;width:100%;max-width:420px;display:grid}.memory-card{aspect-ratio:1;cursor:pointer;position:relative}.memory-card-inner{width:100%;height:100%;transform-style:preserve-3d;border-radius:14px;transition:transform .45s;position:relative}.memory-card.flipped .memory-card-inner{transform:rotateY(180deg)}.memory-card-front,.memory-card-back{backface-visibility:hidden;border-radius:14px;justify-content:center;align-items:center;font-size:2rem;display:flex;position:absolute;inset:0}.memory-card-front{background:linear-gradient(135deg,#ffb6c1,#ffa0c4);border:2px solid #fff6;box-shadow:0 4px 12px #ffa0c44d}.memory-card-back{background:#ffffffe6;border:2px solid #ffb6c166;font-size:2.4rem;transform:rotateY(180deg);box-shadow:0 4px 12px #0000001a}.memory-card.matched .memory-card-back{background:#d4eddae6;border-color:#28a7454d;animation:.4s matchPop}.memory-card.matched{pointer-events:none}@keyframes matchPop{0%{transform:rotateY(180deg)scale(1)}50%{transform:rotateY(180deg)scale(1.15)}to{transform:rotateY(180deg)scale(1)}}.catch-area{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);-webkit-user-select:none;user-select:none;background:#ffffff26;border:2px solid #ffb6c14d;border-radius:20px;width:100%;max-width:500px;height:400px;position:relative;overflow:hidden}.catch-item{cursor:pointer;filter:drop-shadow(0 2px 4px #00000026);z-index:2;font-size:2.2rem;transition:transform .1s;animation:linear forwards fallDown;position:absolute;top:-50px}.catch-item:hover{transform:scale(1.3)}.catch-item:active{transform:scale(.8)}@keyframes fallDown{0%{opacity:0;top:-50px}5%{opacity:1}85%{opacity:1}to{opacity:0;top:calc(100% + 20px)}}.catch-cat{z-index:1;font-size:2.8rem;animation:1.5s ease-in-out infinite catReady;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}@keyframes catReady{0%,to{transform:translate(-50%)rotate(0)}25%{transform:translate(-60%)rotate(-5deg)}75%{transform:translate(-40%)rotate(5deg)}}.ttt-board{grid-template-columns:repeat(3,1fr);gap:.6rem;width:100%;max-width:320px;display:grid}.ttt-cell{aspect-ratio:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;background:#fffc;border:2px solid #ffb6c159;border-radius:16px;justify-content:center;align-items:center;transition:transform .15s,background .2s,box-shadow .2s;display:flex}.ttt-cell:not(.filled):hover{background:#ffb6c133;transform:scale(1.05);box-shadow:0 4px 16px #ff6f9126}.ttt-cell.filled{cursor:default}.ttt-cell.win-cell{background:#d4eddae6;border-color:#28a74566;animation:.6s infinite alternate winPulse}.ttt-mark{font-size:2.8rem;animation:.3s cubic-bezier(.34,1.56,.64,1) markAppear}@keyframes markAppear{0%{opacity:0;transform:scale(0)rotate(-20deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes winPulse{0%{transform:scale(1)}to{transform:scale(1.06)}}.intro-splash{z-index:9999;flex-direction:column;justify-content:center;align-items:center;transition:opacity 1.5s,transform 1s;display:flex;position:fixed;inset:0;overflow:hidden}.intro-splash.exit{opacity:0;pointer-events:none;transform:scale(1.05)}.intro-bg-layer{border-radius:40%;width:200%;height:200%;position:absolute;inset:-50%}.intro-bg-1{background:linear-gradient(135deg,#ffd1dc,#ffb6c1,#ff9a9e,#fad0c4);animation:6s ease-in-out infinite bgFlow1}.intro-bg-2{opacity:.7;background:linear-gradient(225deg,#fbc2eb,#a6c1ee,#ffd1dc,#f6d5f7);animation:8s ease-in-out infinite bgFlow2}.intro-bg-3{opacity:.5;background:linear-gradient(45deg,#ffecd2,#fcb69f,#ff9a9e,#fecfef);animation:7s ease-in-out infinite bgFlow3}@keyframes bgFlow1{0%,to{transform:translate(-5%,-5%)rotate(0)}33%{transform:translate(5%,-3%)rotate(120deg)}66%{transform:translate(-3%,5%)rotate(240deg)}}@keyframes bgFlow2{0%,to{transform:translate(5%,3%)rotate(0)}33%{transform:translate(-5%,5%)rotate(-120deg)}66%{transform:translate(3%,-5%)rotate(-240deg)}}@keyframes bgFlow3{0%,to{transform:translateY(-5%)rotate(0)}50%{transform:translate(-5%,5%)rotate(180deg)}}.intro-particles{z-index:1;pointer-events:none;position:absolute;inset:0}.intro-particle{animation:ease-in-out infinite particleFloat;position:absolute}@keyframes particleFloat{0%,to{opacity:.6;transform:translateY(0)scale(1)}50%{opacity:1;transform:translateY(-30px)scale(1.2)}}.intro-cat-scene{z-index:2;animation:1.2s cubic-bezier(.34,1.56,.64,1) both catEnter;position:relative}@keyframes catEnter{0%{opacity:0;transform:scale(0)rotate(-20deg)}60%{opacity:1;transform:scale(1.1)rotate(5deg)}to{opacity:1;transform:scale(1)rotate(0)}}.intro-cat{animation:2s ease-in-out infinite catBob}@keyframes catBob{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.cat-body{width:140px;height:160px;position:relative}.cat-head{z-index:2;background:#fff;border-radius:50% 50% 45% 45%;width:120px;height:100px;position:absolute;top:20px;left:10px;box-shadow:0 4px 20px #0000001a}.cat-ear{z-index:1;border-bottom:40px solid #fff;border-left:22px solid #0000;border-right:22px solid #0000;width:0;height:0;position:absolute;top:0}.cat-ear:after{content:"";border-bottom:26px solid #ffb6c1;border-left:14px solid #0000;border-right:14px solid #0000;width:0;height:0;position:absolute;top:12px;left:-14px}.cat-ear-left{left:12px;transform:rotate(-15deg)}.cat-ear-right{right:12px;transform:rotate(15deg)}.cat-eye{background:#2d2d2d;border-radius:50%;width:18px;height:22px;animation:3s ease-in-out infinite blink;position:absolute;top:35px}.cat-eye:after{content:"";background:#fff;border-radius:50%;width:6px;height:6px;position:absolute;top:4px;left:5px}.cat-eye-left{left:28px}.cat-eye-right{right:28px}@keyframes blink{0%,90%,to{transform:scaleY(1)}95%{transform:scaleY(.1)}}.cat-nose{background:#ffb6c1;border-radius:50% 50% 40% 40%;width:10px;height:7px;position:absolute;top:58px;left:50%;transform:translate(-50%)}.cat-mouth{border-bottom:2.5px solid #ccc;border-radius:0 0 50% 50%;width:20px;height:10px;position:absolute;top:64px;left:50%;transform:translate(-50%)}.cat-blush{background:#ffb6c180;border-radius:50%;width:18px;height:10px;position:absolute;top:55px}.cat-blush-left{left:14px}.cat-blush-right{right:14px}.cat-torso{z-index:1;background:#fff;border-radius:50% 50% 40% 40%;width:100px;height:60px;position:absolute;bottom:0;left:20px;box-shadow:0 4px 16px #00000014}.cat-tail{transform-origin:0;z-index:0;background:#fff;border-radius:0 20px 20px 0;width:50px;height:20px;animation:1s ease-in-out infinite alternate tailWag;position:absolute;bottom:10px;right:-20px}@keyframes tailWag{0%{transform:rotate(-10deg)}to{transform:rotate(15deg)}}.intro-text{z-index:2;text-align:center;margin-top:2rem;animation:1s .6s both textFadeIn;position:relative}.intro-title{color:#fff;text-shadow:0 2px 20px #ff6f9166;letter-spacing:3px;margin:0;font-size:3rem;font-weight:800}.intro-tagline{color:#ffffffe6;margin:.5rem 0 0;font-size:1.1rem;font-weight:500}@keyframes textFadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}body,html{color:#fff;background:url(/background-tomato-cat.jpg) 50%/cover no-repeat fixed;height:100vh;margin:0;padding:0;font-family:Segoe UI,sans-serif;position:relative;overflow:hidden}body:before{content:"";background:inherit;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:-1;width:100%;height:100%;position:fixed;top:0;left:0}#root{height:100vh;margin:0}.welcome-container{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.welcome-box{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0006;border-radius:12px;padding:40px;box-shadow:0 8px 32px #00000040}.welcome-title{margin-bottom:10px;font-size:2.5rem}.welcome-subtitle{margin-bottom:30px;font-size:1.2rem}.login-button{color:#1e3c72;cursor:pointer;background-color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:1rem;transition:all .3s}.login-button:hover{background-color:#e0e0e0}.app-container{width:100%;height:100%;position:relative}