:root{--pink: #ff85a2;--pink-dark: #e84393;--light-pink: #ffdae0;--teal: #4ecdc4;--gold: #fbc531;--bg: #fffcf2;--text: #2d3436;--card-bg: #ffffff;--purple: #a55eea;--card-width: 120px;--card-height: 170px;--header-height: 70px;--gap-size: 40px}@media (min-width: 768px){:root{--card-width: 180px;--card-height: 250px;--gap-size: 60px}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;font-family:Fredoka,sans-serif;background-color:var(--bg);color:var(--text);height:100vh;width:100vw;overflow:hidden;display:flex;flex-direction:column;touch-action:none;-webkit-user-select:none;user-select:none}.header{height:var(--header-height);padding:10px 20px;display:flex;justify-content:space-between;align-items:center;background:#fffc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 4px 20px #0000000d;z-index:50}.brand{font-size:1.4rem;font-weight:700;color:var(--pink);text-transform:uppercase;letter-spacing:1px}.stats-container{display:flex;gap:10px}.badge{background:#fff;padding:6px 14px;border-radius:20px;font-weight:700;border:2px solid var(--light-pink);font-size:1rem;color:var(--text);display:flex;align-items:center;gap:6px;box-shadow:0 2px 5px #0000000d}.timer-badge{color:var(--teal);border-color:var(--teal)}.timeline-area{flex:1;overflow-x:auto;overflow-y:hidden;display:flex;padding:40px;scroll-behavior:smooth;background-image:radial-gradient(var(--light-pink) 10%,transparent 10%);background-position:0 0;background-size:30px 30px;touch-action:pan-x}.timeline-area::-webkit-scrollbar{height:8px}.timeline-area::-webkit-scrollbar-thumb{background:var(--pink);border-radius:4px}.timeline-content{display:flex;align-items:center;gap:10px;margin:auto;min-width:min-content;padding-right:40px}.hand-area{min-height:calc(var(--card-height) + 60px);background:#fff;border-radius:30px 30px 0 0;box-shadow:0 -10px 40px #00000014;display:flex;align-items:center;justify-content:center;padding:10px 20px 30px;gap:10px;z-index:60;overflow-x:auto;touch-action:pan-x}.hand-content{display:flex;gap:15px;align-items:center;min-width:min-content}.hand-area::-webkit-scrollbar{display:none}.card{width:var(--card-width);height:var(--card-height);background:var(--card-bg);border-radius:16px;padding:10px;box-shadow:0 8px 20px #0000001f;display:flex;flex-direction:column;position:relative;flex-shrink:0;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;border:4px solid white;touch-action:pan-x}.card.selected{border-color:var(--gold);transform:translateY(-30px) scale(1.05) rotate(2deg);z-index:100;box-shadow:0 25px 50px #fbc53166}.card img{width:100%;height:60%;object-fit:cover;border-radius:10px;pointer-events:none;background:#f0f0f0}.card-content{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;margin-top:8px;pointer-events:none}.card-title{font-size:.85rem;font-weight:700;color:#636e72;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.2}@media (min-width: 768px){.card-title{font-size:1.1rem}}.card-date{position:absolute;bottom:8px;right:10px;font-weight:800;color:#fff;font-size:1.1rem;background:var(--teal);padding:4px 10px;border-radius:20px;box-shadow:0 3px #0000001a}.zoom-trigger{position:absolute;top:-10px;right:-10px;width:36px;height:36px;border-radius:50%;background:#fff;border:3px solid var(--pink);display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 4px 10px #00000026;z-index:10;cursor:pointer;transition:transform .2s}.zoom-trigger:hover{transform:scale(1.1)}.card.dragging{opacity:.1;filter:grayscale(1)}.drag-ghost{position:fixed;z-index:1000;box-shadow:0 30px 60px #0006;pointer-events:none;width:var(--card-width);height:var(--card-height);transform:rotate(5deg) scale(1.05);background:#fff;padding:10px;border-radius:16px;border:4px solid var(--pink)}.drag-ghost img{width:100%;height:65%;object-fit:cover;border-radius:10px}.gap{width:var(--gap-size);height:80%;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.25,1,.5,1);margin:0 5px;position:relative;flex-shrink:0;touch-action:pan-x}.gap-inner{width:40px;height:40px;border-radius:50%;background:var(--light-pink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.6rem;border:3px dashed white;pointer-events:none;box-shadow:0 4px 10px #0000001a}.gap:after{content:"";position:absolute;top:-20px;right:-20px;bottom:-20px;left:-20px;z-index:1}.gap.active{width:calc(var(--card-width) + 20px)}.gap.active .gap-inner{background:var(--teal);border-style:solid;transform:scale(1.5);box-shadow:0 0 0 8px #4ecdc44d}.gap.highlight .gap-inner{background:var(--gold);animation:pulse 1s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fffffff2}.overlay.hidden{opacity:0;pointer-events:none}.overlay-content{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px 100px;position:relative;z-index:2}#screen-start{background:radial-gradient(circle at 50% 100%,#fff0f3,#fff)}.floating-shape{position:absolute;border-radius:50%;opacity:.6;animation:floatUp 20s linear infinite;z-index:1;pointer-events:none}@keyframes floatUp{0%{transform:translateY(110vh) rotate(0)}to{transform:translateY(-10vh) rotate(360deg)}}.title-pop{font-size:3.5rem;color:var(--pink);text-shadow:4px 4px 0 white,6px 6px 0 rgba(0,0,0,.05);margin-bottom:1.5rem;transform:rotate(-3deg);animation:titleBounce 3s ease-in-out infinite;text-align:center}@keyframes titleBounce{0%,to{transform:rotate(-3deg) scale(1)}50%{transform:rotate(3deg) scale(1.05)}}.btn-juicy{background:var(--pink);color:#fff;border:none;padding:15px 30px;border-radius:50px;font-size:1.1rem;font-weight:800;cursor:pointer;box-shadow:0 6px 0 var(--pink-dark),0 10px 15px #e8439366;transition:transform .1s,box-shadow .1s;margin-top:20px;font-family:inherit;text-transform:uppercase;letter-spacing:1px}.btn-juicy:active{transform:translateY(4px);box-shadow:0 2px 0 var(--pink-dark)}.btn-secondary{background:var(--teal);box-shadow:0 6px #2a9d8f}.btn-purple{background:var(--purple);box-shadow:0 6px #8e44ad}.btn-share{background:#25d366;box-shadow:0 6px #128c7e;width:100%;max-width:320px;margin-bottom:20px;display:flex;justify-content:center;align-items:center;gap:10px}.btn-share:active{box-shadow:0 2px #128c7e}@media (min-width: 768px){.btn-juicy{padding:18px 50px;font-size:1.4rem;box-shadow:0 8px 0 var(--pink-dark),0 15px 20px #e8439366}}.level-list{display:flex;flex-direction:column;gap:20px;width:100%;max-width:400px;padding:10px;align-items:stretch}.level-card{background:#fff;border-radius:24px;padding:15px;display:flex;align-items:center;gap:20px;border:4px solid #eee;box-shadow:0 8px #eee;transition:all .2s;cursor:pointer;position:relative;text-align:left}.level-card:active{transform:translateY(4px);box-shadow:0 4px #eee}.level-card.locked{border-color:#f0f0f0;color:#bbb;box-shadow:none;border-style:dashed;background:#fafafa;opacity:.8}.level-card.completed{border-color:var(--teal);box-shadow:0 8px #2a9d8f;background:#e0fbf9}.level-card.current{border-color:var(--pink);background:#fff0f3;box-shadow:0 8px 0 var(--pink-dark),0 0 20px #ff85a266;transform:scale(1.02);z-index:5;animation:cardPulse 2s infinite ease-in-out}.level-card.current:active{transform:scale(1.02) translateY(4px);box-shadow:0 4px 0 var(--pink-dark);animation:none}@keyframes cardPulse{0%,to{transform:scale(1.02)}50%{transform:scale(1.04)}}.level-num{width:60px;height:60px;background:#eee;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;color:#888;flex-shrink:0;border:3px solid rgba(255,255,255,.5)}.level-card.completed .level-num{background:var(--teal);color:#fff;border-color:#fff}.level-card.current .level-num{background:var(--pink);color:#fff;border-color:#fff}.level-card.locked .level-num{background:#ddd;color:#bbb}.level-details{flex:1}.level-name{font-size:1.2rem;font-weight:700;color:var(--text);margin-bottom:4px;display:block;line-height:1.1}.level-card.locked .level-name{color:#aaa}.level-desc{font-size:.85rem;font-weight:600;color:#888;display:block}.level-status-icon{font-size:1.5rem;margin-right:5px}.leaderboard-table{width:100%;max-width:400px;background:#fff;border-radius:20px;padding:20px;box-shadow:0 10px 30px #0000000d;border:3px solid var(--light-pink)}.lb-row{display:flex;justify-content:space-between;padding:15px 10px;border-bottom:1px solid #eee;font-weight:700;color:var(--text)}.lb-row:last-child{border-bottom:none}.lb-rank{width:30px}.lb-name{flex:1;text-align:left}.lb-score{color:var(--pink)}#photo-wall{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:15px;margin:20px 0;max-height:35vh;overflow-y:auto;padding:10px;width:100%}.mini-card{width:90px;height:120px;background:#fff;padding:5px 5px 25px;box-shadow:0 5px 15px #0003;transition:transform .3s;border:1px solid #ddd}.mini-card:hover{transform:scale(1.3) rotate(0)!important;z-index:50}.mini-card img{width:100%;height:100%;object-fit:cover}.score-board{background:#fff;padding:20px 30px;border-radius:25px;box-shadow:0 10px 30px #0000001a;margin-bottom:20px;border:4px solid var(--light-pink);width:100%;max-width:400px}.score-row{display:flex;justify-content:space-between;gap:20px;font-size:1rem;color:#888;margin-bottom:8px;font-weight:600}.score-total{font-size:2rem;font-weight:900;color:var(--pink);margin-top:10px;border-top:2px dashed #eee;padding-top:10px}#zoom-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000f2;z-index:5000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}#zoom-modal.visible{opacity:1;pointer-events:auto}#zoom-card{background:#fff;padding:15px 15px 50px;border-radius:20px;max-width:90%;max-height:85vh;transform:scale(.8);transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}#zoom-modal.visible #zoom-card{transform:scale(1)}#zoom-img{max-width:100%;max-height:65vh;border-radius:10px}.feedback-pop{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%) scale(0);font-size:5rem;font-weight:900;z-index:3000;text-shadow:4px 4px 0 white,8px 8px 0 rgba(0,0,0,.2);pointer-events:none;transition:transform .4s cubic-bezier(.175,.885,.32,1.275),opacity .4s;opacity:0}.feedback-pop.show{transform:translate(-50%,-50%) scale(1);opacity:1}