.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;background:#1a0a12;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.08)}.intro-bg-layer{filter:blur(80px);border-radius:40%;width:220%;height:220%;position:absolute;inset:-60%}.intro-bg-1{background:linear-gradient(135deg,#4a0e2a,#8b2252,#c2185b,#4a0e2a);animation:8s ease-in-out infinite bgFlow1}.intro-bg-2{opacity:.7;background:linear-gradient(225deg,#6b1d4a,#d4608a,#a0365a,#5c1a3a);animation:10s ease-in-out infinite bgFlow2}.intro-bg-3{opacity:.5;background:linear-gradient(45deg,#8b2252,#e91e63,#d4608a,#6b1d4a);animation:9s ease-in-out infinite bgFlow3}@keyframes bgFlow1{0%,to{transform:translate(-10%,-10%)rotate(0)scale(1)}33%{transform:translate(10%,-5%)rotate(120deg)scale(1.1)}66%{transform:translate(-5%,10%)rotate(240deg)scale(.95)}}@keyframes bgFlow2{0%,to{transform:translate(8%,5%)rotate(0)scale(1.05)}33%{transform:translate(-8%,8%)rotate(-120deg)scale(1)}66%{transform:translate(5%,-8%)rotate(-240deg)scale(1.1)}}@keyframes bgFlow3{0%,to{transform:translateY(-8%)rotate(0)scale(1)}50%{transform:translate(-8%,8%)rotate(180deg)scale(1.15)}}.intro-orbs{z-index:1;pointer-events:none;position:absolute;inset:0}.intro-orb{filter:blur(30px);background:radial-gradient(circle at 30% 30%,#ffdce659,#ff78a026,#0000 70%);border-radius:50%;animation:ease-in-out infinite orbFloat;position:absolute}@keyframes orbFloat{0%,to{opacity:.15;transform:translateY(0)translate(0)scale(1)}25%{opacity:.3;transform:translateY(-40px)translate(20px)scale(1.15)}50%{opacity:.2;transform:translateY(-20px)translate(-15px)scale(.9)}75%{opacity:.35;transform:translateY(30px)translate(10px)scale(1.1)}}.intro-streaks{z-index:1;pointer-events:none;position:absolute;inset:0;overflow:hidden}.intro-streak{filter:blur(6px);background:linear-gradient(90deg,#0000 0%,#ffc8dc1f 30%,#ff82aa33 50%,#ffc8dc1f 70%,#0000 100%);width:140%;animation:linear infinite streakFlow;position:absolute;left:-20%}@keyframes streakFlow{0%{transform:translate(-100%)skew(-15deg)}to{transform:translate(100%)skew(-15deg)}}.intro-text{z-index:2;text-align:center;animation:1.2s .5s both textFadeIn;position:relative}.intro-title{color:#fffffff2;text-shadow:0 0 40px #ff78a066,0 0 80px #ffa0c833;letter-spacing:10px;text-transform:uppercase;margin:0;font-size:3.5rem;font-weight:200}.intro-tagline{color:#ffffff80;letter-spacing:4px;text-transform:uppercase;margin:1rem 0 0;font-size:1rem;font-weight:300}@keyframes textFadeIn{0%{opacity:0;filter:blur(10px);transform:translateY(30px)scale(.95)}to{opacity:1;filter:blur();transform:translateY(0)scale(1)}}.intro-cat-silhouette{z-index:1;opacity:.06;filter:blur(2px);background:radial-gradient(50% 45% at 50% 40%,#ffffffe6 0%,#0000 100%);width:640px;height:640px;animation:2s .3s both silhouetteFadeIn,6s ease-in-out infinite silhouetteFloat;position:absolute;bottom:-60px;right:-40px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M40 70 L55 25 L75 60 L125 60 L145 25 L160 70 C170 90 170 130 140 155 L130 165 C120 175 80 175 70 165 L60 155 C30 130 30 90 40 70Z' fill='black'/%3E%3Ccircle cx='80' cy='95' r='10' fill='black'/%3E%3Ccircle cx='120' cy='95' r='10' fill='black'/%3E%3Cellipse cx='100' cy='115' rx='6' ry='4' fill='black'/%3E%3Cpath d='M155 140 Q190 120 195 145 Q198 165 165 155' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M40 70 L55 25 L75 60 L125 60 L145 25 L160 70 C170 90 170 130 140 155 L130 165 C120 175 80 175 70 165 L60 155 C30 130 30 90 40 70Z' fill='black'/%3E%3Ccircle cx='80' cy='95' r='10' fill='black'/%3E%3Ccircle cx='120' cy='95' r='10' fill='black'/%3E%3Cellipse cx='100' cy='115' rx='6' ry='4' fill='black'/%3E%3Cpath d='M155 140 Q190 120 195 145 Q198 165 165 155' fill='black'/%3E%3C/svg%3E");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}@keyframes silhouetteFadeIn{0%{opacity:0}to{opacity:.06}}@keyframes silhouetteFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.intro-paws{z-index:1;pointer-events:none;position:absolute;inset:0}.intro-paw{opacity:0;filter:blur(1px);animation:ease-in-out infinite pawDrift;position:absolute}@keyframes pawDrift{0%{opacity:0;transform:translateY(20px)rotate(-10deg)scale(.8)}20%{opacity:.12}50%{opacity:.18;transform:translateY(-30px)rotate(5deg)scale(1)}80%{opacity:.1}to{opacity:0;transform:translateY(-60px)rotate(15deg)scale(.9)}}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}