:root{--coral:#FF8A80;--coral-light:#FFF0EE;--coral-glow:rgba(255,138,128,0.35);--peach:#FFCC80;--peach-light:#FFF8F0;--mint:#81C784;--mint-light:#E8F5E9;--mint-glow:rgba(129,199,132,0.30);--lavender:#B39DDB;--lavender-light:#EDE7F6;--sunny:#FFF176;--sunny-light:#FFFDE7;--berry:#E57373;--berry-light:#FFEBEE;--vanilla:#FFF8EC;--cream:#FFFDF7;--navy:#2C3E50;--slate:#546E7A;--cloud:#ECEFF1;--word-w:180px;--word-h:110px;--image-w:180px;--image-h:180px;--card-radius:22px;--card-shadow:0 6px 20px rgba(44,62,80,0.08),0 2px 6px rgba(44,62,80,0.04);--card-shadow-hover:0 12px 32px rgba(44,62,80,0.12),0 4px 12px rgba(44,62,80,0.06)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}body{font-family:Nunito,PingFang SC,Noto Sans SC,system-ui,sans-serif;background:radial-gradient(ellipse at 20% 20%,rgba(255,138,128,.08) 0,transparent 60%),radial-gradient(ellipse at 80% 10%,rgba(179,157,219,.1) 0,transparent 55%),radial-gradient(ellipse at 50% 90%,rgba(129,199,132,.07) 0,transparent 50%),var(--vanilla);background-attachment:fixed;height:100dvh;overflow:hidden;color:var(--navy);-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(circle at 10% 15%,rgba(255,204,128,.18) 0,transparent 120px),radial-gradient(circle at 85% 25%,rgba(179,157,219,.14) 0,transparent 100px),radial-gradient(circle at 30% 75%,rgba(129,199,132,.12) 0,transparent 130px),radial-gradient(circle at 70% 80%,rgba(255,138,128,.12) 0,transparent 110px),radial-gradient(circle at 50% 50%,rgba(255,241,118,.1) 0,transparent 200px);z-index:0}.container{width:100%;height:100dvh;display:flex;flex-direction:column;position:relative;z-index:1;padding:16px 20px}.header{position:relative;flex-shrink:0;padding:4px 0 8px}.header,.header h1{display:flex;align-items:center;justify-content:center}.header h1{font-family:Fredoka,PingFang SC,sans-serif;font-size:30px;font-weight:700;color:var(--navy);letter-spacing:-.3px;text-shadow:0 2px 8px rgba(255,138,128,.15);text-align:center;gap:6px}.top-actions{position:fixed;top:20px;right:20px;z-index:50;display:flex;gap:10px}.btn-audio{width:40px;height:40px;border:2px solid var(--lavender);background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--lavender);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s ease;padding:0}.btn-audio:hover{background:var(--lavender);color:white;box-shadow:0 4px 16px rgba(179,157,219,.3)}.btn-manage{padding:10px 20px;border:2px solid var(--lavender);background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--lavender);border-radius:30px;cursor:pointer;font-family:Nunito,sans-serif;font-size:14px;font-weight:700;transition:all .25s ease;display:inline-flex;align-items:center;gap:4px}.btn-manage:hover{background:var(--lavender);color:white;border-color:var(--lavender);box-shadow:0 4px 16px rgba(179,157,219,.3);transform:translateY(-1px)}.game-area{flex:1 1;display:flex;flex-direction:column;justify-content:center;gap:20px;min-height:0}.card-connector,.card-row{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}.card-connector{align-items:center;height:12px;position:relative}.card-connector:before{content:"";position:absolute;left:10%;right:10%;top:50%;height:2px;background:repeating-linear-gradient(90deg,var(--lavender) 0,var(--lavender) 6px,transparent 6px,transparent 14px);opacity:.35;border-radius:1px}.connector-dot{width:10px;height:10px;border-radius:50%;background:var(--lavender);opacity:.4;position:relative;z-index:1}.card{border-radius:var(--card-radius);box-shadow:var(--card-shadow);cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,border-color .25s ease,background .25s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:relative}@keyframes cardEnter{0%{opacity:0;transform:translateY(24px) scale(.9)}60%{opacity:1;transform:translateY(-4px) scale(1.03)}to{opacity:1;transform:translateY(0) scale(1)}}.card.entering{animation:cardEnter .55s cubic-bezier(.34,1.56,.64,1) both}.card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover)}.card.matched:hover,.card.selected:hover,.card.wrong:hover{transform:none;box-shadow:var(--card-shadow)}.word-card{background:white;border:3.5px solid #e8e8e8;width:var(--word-w);height:var(--word-h);display:flex;align-items:center;justify-content:center;font-family:Fredoka,sans-serif;font-size:33px;font-weight:600;color:var(--navy);letter-spacing:.5px;border-radius:var(--card-radius);position:relative}.word-card.selected{border-color:#FF6E60;background:linear-gradient(135deg,var(--coral-light),#FFF0EE);box-shadow:0 4px 24px var(--coral-glow),0 0 0 4px rgba(255,138,128,.12);transform:scale(1.07)}.word-card.matched{border-color:var(--mint);background:linear-gradient(135deg,var(--mint-light),#E8F5E9);cursor:default;pointer-events:none;box-shadow:0 4px 18px var(--mint-glow)}.word-card.matched:after{content:"";position:absolute;inset:-4px;border-radius:calc(var(--card-radius) + 4px);border:3px dashed var(--mint);opacity:.5;pointer-events:none}.word-card.wrong{animation:shake .45s ease;border-color:var(--berry);background:var(--berry-light)}.word-card .match-check{display:inline-block;color:var(--mint);font-size:22px;margin-left:4px;animation:checkPop .35s cubic-bezier(.34,1.56,.64,1)}@keyframes checkPop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.image-card{background:white;border:3.5px solid var(--cloud);width:var(--image-w);height:var(--image-h);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:12px;position:relative;border-radius:var(--card-radius)}.image-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,138,128,.04),rgba(179,157,219,.04));opacity:0;transition:opacity .3s;pointer-events:none;border-radius:calc(var(--card-radius) - 2px)}.image-card:not(.matched):not(.wrong):hover:before{opacity:1}.image-card img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none;transition:transform .3s ease}.image-card:not(.matched):not(.wrong):hover img{transform:scale(1.08)}.image-card.matched{border-color:var(--mint);background:linear-gradient(135deg,var(--mint-light),#E8F5E9);cursor:default;pointer-events:none;box-shadow:0 4px 18px var(--mint-glow)}.image-card.matched:after{content:"";position:absolute;inset:-4px;border-radius:calc(var(--card-radius) + 4px);border:3px dashed var(--mint);opacity:.5;pointer-events:none}.image-card.wrong{animation:shake .45s ease;border-color:var(--berry);background:var(--berry-light);pointer-events:none}.image-card.wrong img{transform:scale(.95)}.image-card .placeholder{font-family:Nunito,sans-serif;font-size:14px;font-weight:600;color:var(--slate);text-align:center;padding:8px}.image-card-check{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:38px;color:var(--mint);font-weight:700;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:var(--card-radius);pointer-events:none;animation:checkPop .35s cubic-bezier(.34,1.56,.64,1)}@keyframes shake{0%,to{transform:translateX(0)}15%{transform:translateX(-10px)}35%{transform:translateX(10px)}55%{transform:translateX(-7px)}75%{transform:translateX(7px)}}.status-bar{display:flex;justify-content:space-between;align-items:center;padding:6px 4px;font-family:Nunito,sans-serif;font-size:16px;font-weight:600;color:var(--slate)}.status-bar span{display:inline-flex;align-items:center;gap:3px}.error-count{color:var(--berry);font-weight:800;font-size:18px}.btn-play-again{padding:12px 28px;background:linear-gradient(135deg,var(--coral),#FF6E60);color:white;border:none;border-radius:30px;font-family:Fredoka,sans-serif;font-size:16px;font-weight:600;cursor:pointer;transition:all .25s ease;box-shadow:0 4px 14px var(--coral-glow);display:inline-flex;align-items:center;gap:4px}.btn-play-again:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--coral-glow)}.btn-play-again:active{transform:translateY(0);box-shadow:0 2px 8px var(--coral-glow)}.celebration-overlay{display:flex;position:fixed;inset:0;background:rgba(44,62,80,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:100;justify-content:center;align-items:center}.celebration-box{background:white;border-radius:32px;padding:44px 52px;text-align:center;box-shadow:0 16px 48px rgba(44,62,80,.18),inset 0 0 0 1px rgba(255,255,255,.6);animation:popIn .5s cubic-bezier(.34,1.56,.64,1);max-width:420px;width:92%;position:relative;overflow:hidden}.celebration-box:before{top:-60px;left:-60px;width:140px;height:140px;background:radial-gradient(circle,rgba(255,241,118,.25),transparent 70%)}.celebration-box:after,.celebration-box:before{content:"";position:absolute;border-radius:50%;pointer-events:none}.celebration-box:after{bottom:-40px;right:-40px;width:120px;height:120px;background:radial-gradient(circle,rgba(255,138,128,.2),transparent 70%)}@keyframes popIn{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.04);opacity:1}to{transform:scale(1);opacity:1}}.celebration-box .emoji{font-size:72px;line-height:1;position:relative;z-index:1;animation:emojiBounce .8s ease infinite alternate;display:inline-block}@keyframes emojiBounce{0%{transform:translateY(0)}to{transform:translateY(-10px)}}.celebration-box h2{font-family:Fredoka,sans-serif;font-size:30px;color:var(--navy);margin:16px 0 8px;position:relative;z-index:1}.celebration-box .errors{font-family:Nunito,sans-serif;font-size:16px;font-weight:600;color:var(--slate);margin-bottom:24px;position:relative;z-index:1}.confetti-container{position:fixed;inset:0;pointer-events:none;z-index:101;overflow:hidden}.confetti{position:absolute;border-radius:3px;animation:confettiFall linear forwards}.confetti.star{animation:confettiStar linear forwards}.confetti.circle,.confetti.star{border-radius:50%}.confetti.wave{animation:confettiWave linear forwards}@keyframes confettiFall{0%{transform:translateY(-120px) rotate(0deg) scale(1);opacity:1}80%{opacity:1}to{transform:translateY(105vh) rotate(860deg) scale(.7);opacity:0}}@keyframes confettiStar{0%{transform:translateY(-120px) rotate(0deg) scale(0);opacity:1}30%{transform:translateY(10vh) rotate(180deg) scale(1.3);opacity:1}to{transform:translateY(105vh) rotate(540deg) scale(.5);opacity:0}}@keyframes confettiWave{0%{transform:translateY(-120px) translateX(0) rotate(0deg);opacity:1}25%{transform:translateY(15vh) translateX(40px) rotate(200deg);opacity:1}50%{transform:translateY(40vh) translateX(-30px) rotate(400deg);opacity:1}to{transform:translateY(105vh) translateX(20px) rotate(2turn);opacity:0}}.manage-modal-overlay{position:fixed;inset:0;background:rgba(44,62,80,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:90;display:flex;justify-content:center;align-items:center;padding:20px;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.manage-panel{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:24px;box-shadow:0 16px 48px rgba(44,62,80,.16),inset 0 0 0 1px rgba(255,255,255,.6);border:1px solid rgba(179,157,219,.2);width:100%;max-width:560px;max-height:85dvh;display:flex;flex-direction:column;animation:popIn .35s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.manage-panel-header{flex-shrink:0;padding:24px 28px 0}.manage-panel-header h3{font-family:Fredoka,sans-serif;font-size:22px;margin-bottom:16px;color:var(--navy);padding-right:36px}.manage-word-count{font-weight:600;color:var(--slate);margin-left:6px}.manage-toast,.manage-word-count{font-size:14px;font-family:Nunito,sans-serif}.manage-toast{position:absolute;top:56px;left:50%;transform:translateX(-50%);padding:10px 24px;border-radius:20px;font-weight:700;z-index:3;animation:toastIn .3s ease;white-space:nowrap;pointer-events:none}.manage-toast.success{background:var(--mint-light);color:#2E7D32;border:1.5px solid var(--mint)}.manage-toast.error{background:var(--berry-light);color:#C62828;border:1.5px solid var(--berry)}@keyframes toastIn{0%{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.upload-filename{font-family:Nunito,sans-serif;font-size:12px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;align-self:center;opacity:.7}.word-list-empty{text-align:center;padding:24px;color:var(--slate);font-size:14px;opacity:.6}.manage-panel-body{flex:1 1;overflow-y:auto;padding:0 28px;min-height:0}.manage-panel-footer{flex-shrink:0;padding:0 28px 24px}.btn-modal-close{position:absolute;top:20px;right:20px;z-index:2;width:36px;height:36px;border-radius:50%;border:none;background:var(--cloud);color:var(--slate);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;line-height:1}.btn-modal-close:hover{background:var(--berry);color:white}.mode-tabs{display:flex;justify-content:center;gap:8px;padding:0 0 12px;flex-shrink:0}.mode-tab{padding:8px 18px;border:2px solid var(--cloud);background:rgba(255,255,255,.6);border-radius:24px;cursor:pointer;font-family:Nunito,sans-serif;font-size:14px;font-weight:700;color:var(--slate);transition:all .2s;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}.mode-tab:hover{border-color:var(--lavender);color:var(--lavender)}.mode-tab.active{border-color:var(--coral);background:var(--coral-light);color:var(--coral);box-shadow:0 2px 10px var(--coral-glow)}.prompt-card{margin:0 auto;flex-shrink:0}.card.just-correct{border-color:var(--mint)!important;background:var(--mint-light)!important;box-shadow:0 4px 18px var(--mint-glow)!important;pointer-events:none;animation:correctPulse .6s ease}@keyframes correctPulse{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}.add-form{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:flex-end}.add-form input{padding:10px 16px;border:2px solid var(--cloud);border-radius:14px;font-size:15px;font-family:Nunito,sans-serif;background:white;transition:border-color .2s,box-shadow .2s}.add-form input:focus{outline:none;border-color:var(--lavender);box-shadow:0 0 0 3px rgba(179,157,219,.15)}.add-form input[type=text]{flex:1 1;min-width:120px}.add-form input[type=file]{display:none}.add-form select{min-width:140px}.btn-upload{padding:10px 18px;background:white;border:2px dashed var(--lavender);border-radius:14px;cursor:pointer;font-family:Nunito,sans-serif;font-size:14px;font-weight:600;color:var(--lavender);transition:all .2s}.btn-upload:hover{border-color:var(--lavender);background:var(--lavender-light);color:#7E57C2}.btn-add{padding:10px 22px;background:linear-gradient(135deg,var(--mint),#66BB6A);color:white;border:none;border-radius:14px;font-family:Nunito,sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 3px 12px rgba(129,199,132,.25)}.btn-add:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-add:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(129,199,132,.35)}.word-list{border-top:1px solid var(--cloud);padding:14px 0 0}.word-list-item{display:flex;align-items:center;gap:14px;padding:12px 10px;border-bottom:1px solid rgba(179,157,219,.1);font-family:Nunito,sans-serif;font-size:16px;transition:background .15s;border-radius:12px}.word-list-item:hover{background:rgba(179,157,219,.06)}.word-list-item .thumb{width:52px;height:52px;border-radius:12px;object-fit:contain;background:var(--cream);border:1px solid var(--cloud)}.word-list-item .word-text{flex:1 1;font-weight:700;color:var(--navy)}.btn-delete{padding:7px 16px;background:none;border:1.5px solid var(--berry);color:var(--berry);border-radius:20px;cursor:pointer;font-family:Nunito,sans-serif;font-size:13px;font-weight:700;transition:all .2s}.btn-delete:hover{background:var(--berry);color:white}.hint{font-family:Nunito,sans-serif;font-size:13px;color:var(--slate);margin-top:14px;opacity:.7}.empty-state{text-align:center;padding:64px 24px;color:var(--slate)}.empty-state .emoji{font-size:56px;filter:grayscale(.2)}.empty-state p{font-family:Nunito,sans-serif;font-size:19px;font-weight:600;margin:16px 0}@media (max-width:640px){body{padding:14px 12px 40px}.header h1{font-size:24px}:root{--word-w:150px;--word-h:90px;--image-w:150px;--image-h:150px}.word-card{font-size:28px}.card-row{gap:12px}.celebration-box{padding:36px 28px;border-radius:28px}.celebration-box h2{font-size:24px}.celebration-box .emoji{font-size:56px}}@media (max-width:400px){:root{--word-w:120px;--word-h:72px;--image-w:120px;--image-h:120px}.word-card{font-size:22px}.card-row{gap:8px}}