.advent-root{margin:0;overflow:hidden;background:linear-gradient(135deg,#ffb3ae,#d175a3);font-family:Epilogue,sans-serif;color:#e1e1ef;position:fixed;inset:0}#video-bg-container{position:fixed;top:-5vh;left:-5vw;width:110vw;height:110vh;z-index:0;overflow:hidden;transition:transform 1.5s cubic-bezier(.25,1,.5,1);transform-origin:center center}#video-bg-container video{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}.state-container{position:absolute;inset:0;z-index:10;display:none;align-items:center;justify-content:center;pointer-events:none}.state-container.active{display:flex;pointer-events:auto;z-index:20}.state-container.active *{pointer-events:auto}.fade-in-up{opacity:0;transform:translateY(20px);animation:fadeInUp .8s forwards}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.pull-in{animation:pullIn 1s cubic-bezier(.25,1,.5,1) forwards}@keyframes pullIn{0%{opacity:0;transform:translate(var(--start-x),var(--start-y)) scale(.8)}to{opacity:1;transform:translate(0) scale(1)}}.summer-header{position:absolute;top:40px;left:50%;transform:translate(-50%);font-size:12px;letter-spacing:.1em;color:#fff;text-transform:uppercase;z-index:30;font-weight:500;cursor:pointer;pointer-events:auto}.orbital-menu-container{position:relative;width:500px;height:500px;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.orbital-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);pointer-events:none}.orbital-ring:before{content:"";position:absolute;top:-1.5px;right:-1.5px;width:50%;height:50%;border-radius:0 100% 0 0;border-top:2px solid white;border-right:2px solid white;opacity:.8;mask-image:linear-gradient(to bottom left,black,transparent);-webkit-mask-image:linear-gradient(to bottom left,black,transparent)}.main-content{display:flex;flex-direction:column;align-items:center;position:relative;z-index:20}.summer-title{font-family:Fraunces,serif;font-size:72px;font-weight:700;line-height:.9;color:#fff;text-align:center;margin:0 0 30px;letter-spacing:-.02em}.btn-advent{background-color:#95c11f;color:#fff;padding:16px 32px;border-radius:30px;font-weight:600;font-size:16px;border:2px solid white;cursor:pointer;transition:transform .2s;position:relative;z-index:30}.btn-advent:hover{transform:translateY(-2px)}.orbital-pill{position:absolute;background:#fff3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:30px;display:flex;align-items:center;padding:6px 16px 6px 6px;color:#fff;font-size:14px;font-weight:500;gap:10px;cursor:pointer;transition:background .3s,transform .3s;z-index:30}.orbital-pill:hover{background:#ffffff4d;transform:scale(1.05)}.pill-icon{background:#fff;color:#d175a3;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}.pill-icon .material-symbols-outlined{font-size:18px}.pill-fonts{top:-22px;left:50%;transform:translate(-50%);--start-x: -50%;--start-y: -100px}.pill-fonts:hover{transform:translate(-50%) scale(1.05)}.pill-games{bottom:120px;left:-60px;--start-x: -100px;--start-y: 50px}.pill-plugins{bottom:100px;right:-80px;--start-x: 100px;--start-y: 50px}.state2-heading{position:absolute;top:12%;left:50%;transform:translate(-50%);text-align:center;width:100%;z-index:20;pointer-events:none}.state2-heading h2{font-family:Fraunces,serif;font-size:60px;color:#fff;font-weight:700;letter-spacing:-.02em;margin:0}.circular-carousel-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:absolute;inset:0;perspective:1200px;pointer-events:none;overflow:hidden}.circular-track{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;margin-top:64px}.advent-card{position:absolute;width:280px;height:380px;border-radius:40px;background:linear-gradient(135deg,#a8c66466,#a8c66426);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.4);transition:transform .8s cubic-bezier(.25,1,.5,1),opacity .8s ease,width .8s ease,height .8s ease,background .8s ease;pointer-events:auto;transform-origin:center center;cursor:pointer;will-change:transform,opacity}.advent-card.active-card{width:340px;height:440px;z-index:20;background:linear-gradient(135deg,#a8c66499,#a8c6644d)}.advent-card-inner{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;padding:24px 24px 48px;text-align:center;position:relative;pointer-events:none}.advent-card-img{position:absolute;top:-64px;left:50%;transform:translate(-50%);width:192px;height:192px;object-fit:contain}.advent-card-title{font-family:Fraunces,serif;font-size:28px;line-height:1.05;color:#fff;font-weight:700;margin:0 0 24px;letter-spacing:-.02em;position:relative;z-index:10}.advent-card-locked{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;pointer-events:none}.locked-circle{width:80px;height:80px;border-radius:50%;background:#fff3;display:flex;align-items:center;justify-content:center;margin-bottom:24px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3)}.locked-circle .material-symbols-outlined{color:#fff;font-size:32px}.advent-card-locked span{font-family:Fraunces,serif;font-size:28px;color:#fff;font-weight:700}.carousel-btn{background-color:#95c11f;color:#fff;padding:12px 32px;border-radius:30px;font-weight:600;font-size:16px;border:2px solid white;cursor:pointer;transition:transform .2s;pointer-events:auto}.carousel-btn:hover{transform:translateY(-2px)}.carousel-controls{position:absolute;bottom:10%;width:100%;display:flex;justify-content:center;gap:20px;z-index:20;pointer-events:none}.control-btn{width:56px;height:56px;border-radius:50%;background:#a8c66480;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.4);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s,transform .2s;pointer-events:auto}.control-btn:hover{background:#a8c664cc;transform:scale(1.05)}.close-btn{position:absolute;top:40px;left:50%;transform:translate(-50%);width:48px;height:48px;border-radius:50%;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:background .3s;z-index:30;border:1px solid rgba(255,255,255,.3);pointer-events:auto}.close-btn:hover{background:#ffffff4d}.locked-popup{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.locked-popup-content{background:#32343e;border:1px solid rgba(255,255,255,.2);border-radius:24px;padding:32px;max-width:380px;width:calc(100% - 32px);display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}.locked-icon-wrap{width:64px;height:64px;border-radius:50%;background:#ffffff1a;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.2);margin-bottom:16px}.locked-icon-wrap .material-symbols-outlined{color:#fff;font-size:28px}.locked-popup-content h3{font-family:Fraunces,serif;font-size:28px;font-weight:700;color:#fff;margin:0 0 8px;letter-spacing:-.02em}.locked-popup-content p{color:#e4beba;font-size:14px;margin:0 0 24px;font-family:Plus Jakarta Sans,sans-serif}.locked-popup-content input{width:100%;border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:12px 16px;color:#fff;background:transparent;font-family:Plus Jakarta Sans,sans-serif;margin-bottom:12px}.locked-popup-content input::placeholder{color:#fff6}.remind-btn{width:100%;background:#fff;color:#32343e;font-weight:700;border-radius:12px;padding:12px;border:1px solid white;cursor:pointer;font-family:Plus Jakarta Sans,sans-serif}.remind-btn:hover{background:#ffffffe6}.close-x{position:absolute;top:16px;right:16px;background:transparent;border:none;color:#fff9;cursor:pointer}.close-x:hover{color:#fff}.state-4-title{position:absolute;top:15%;width:100%;text-align:center;font-family:Fraunces,serif;z-index:20;pointer-events:none;color:#fff;font-size:72px;font-weight:700;line-height:.9;margin:0;letter-spacing:-.02em}.glass-carousel-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;perspective:1200px;overflow:hidden;position:relative;z-index:10;pointer-events:none}.glass-carousel-track{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:440px;transform-style:preserve-3d;margin-top:40px}.glass-slide{position:absolute;width:340px;height:420px;background:linear-gradient(135deg,#a8c66499,#a8c6644d);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:40px;border:1px solid rgba(255,255,255,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .6s cubic-bezier(.25,1,.5,1),opacity .6s ease;cursor:pointer;pointer-events:auto;overflow:hidden}.palette-card{width:100%;height:100%;display:flex;flex-direction:column;border-radius:40px}.palette-colors{flex:1;display:flex;flex-direction:column;border-top-left-radius:40px;border-top-right-radius:40px;overflow:hidden}.palette-color{flex:1;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:filter .2s}.palette-color:hover{filter:brightness(1.1)}.hex-label{background:#0006;color:#fff;padding:6px 14px;border-radius:20px;font-family:Plus Jakarta Sans,sans-serif;font-size:14px;font-weight:500;letter-spacing:1px;opacity:0;transform:translateY(10px);transition:all .3s ease;pointer-events:none}.palette-color:hover .hex-label{opacity:1;transform:translateY(0)}.hex-label.hidden-label{opacity:0!important}.copy-feedback{position:absolute;background:#fff;color:#11131c;padding:6px 14px;border-radius:20px;font-family:Plus Jakarta Sans,sans-serif;font-size:14px;font-weight:600;letter-spacing:1px;opacity:0;transform:translateY(10px);transition:all .3s ease;pointer-events:none;z-index:2}.copy-feedback.show{opacity:1;transform:translateY(0)}.palette-info{padding:24px;background:#ffffff1a;border-bottom-left-radius:40px;border-bottom-right-radius:40px;text-align:center}.palette-title{font-size:24px;font-weight:700;color:#fff;font-family:Fraunces,serif}.game-level{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.game-title{font-family:Fraunces,serif;font-size:36px;color:#fff;font-weight:700;margin:0 0 16px;text-align:center;letter-spacing:-.02em}.game-sub{color:#fffc;margin:0 0 32px;text-align:center;max-width:380px;font-family:Plus Jakarta Sans,sans-serif}.game-btn{background-color:#95c11f;color:#fff;padding:12px 32px;border-radius:30px;font-weight:600;font-size:16px;border:2px solid white;cursor:pointer;transition:transform .2s}.game-btn:hover{transform:translateY(-2px)}.game-btn.small{font-size:14px;padding:8px 16px}.game-btn.white{background:#fff;color:#32343e}.game-btn.white:hover{background:#ffffffe6}.game-btn.ghost{background:transparent}.game-btn.ghost:hover{background:#ffffff1a}.game-level-tag{color:#fff9;text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:700;margin:0 0 8px}.game-level-title{color:#fff;font-size:24px;font-weight:700;margin:0 0 24px;text-align:center}.icon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:12px}.game-icon-btn{width:100px;height:100px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.game-icon-btn:hover{background:#fff3;transform:scale(1.05)}.game-feedback{margin-top:20px;color:#ffb4ab;font-weight:500;display:flex;flex-direction:column;align-items:center;text-align:center}.game-feedback p{margin:0 0 16px;font-size:14px}.success-circle{width:96px;height:96px;background:#ffdb3c;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:24px}.success-circle .material-symbols-outlined{color:#725f00;font-size:48px}.success-actions{display:flex;gap:16px}
