:root{--red:#FF5252;--red-light:#FFEBEE;--orange:#FF9100;--orange-light:#FFF3E0;--yellow:#FFD600;--yellow-light:#FFFDE7;--green:#4CAF50;--green-light:#E8F5E9;--blue:#448AFF;--blue-light:#E3F2FD;--purple:#AB47BC;--purple-light:#F3E5F5;--navy:#263238;--slate:#607D8B;--cloud:#ECEFF1;--white:#FFFFFF;--berry:#EF5350;--card-w:200px;--card-h:200px;--card-radius:28px;--card-shadow:0 8px 24px rgba(0,0,0,0.06);--card-shadow-hover:0 14px 36px rgba(0,0,0,0.10)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}body{font-family:Fredoka,Nunito,PingFang SC,sans-serif;background:#F5F5F5;height:100dvh;overflow:hidden;color:var(--navy);-webkit-font-smoothing:antialiased}.container{width:100%;height:100dvh;display:flex;flex-direction:column;position:relative;z-index:1;padding:12px 16px}.header{justify-content:center;flex-shrink:0;padding:2px 0 4px}.header,.header h1{display:flex;align-items:center}.header h1{font-family:Fredoka,sans-serif;font-size:26px;font-weight:700;color:var(--navy);gap:4px}.top-actions{position:fixed;top:14px;right:14px;z-index:50;display:flex;gap:12px}.btn-audio,.btn-menu-toggle{width:44px;height:44px;border:3px solid var(--slate);background:var(--white);color:var(--slate);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.06)}.btn-audio:hover,.btn-menu-toggle:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}.btn-manage{padding:10px 20px;border:3px solid var(--slate);background:var(--white);color:var(--slate);border-radius:30px;cursor:pointer;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:4px;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.06)}.btn-manage:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}.game-area{flex:1 1;display:flex;flex-direction:column;justify-content:center;gap:24px;min-height:0;position:relative}.card-row{flex-wrap:wrap}.card-connector,.card-row{display:flex;justify-content:center;gap:20px}.card-connector{align-items:center;height:14px;position:relative}.card-connector:before{content:"";position:absolute;left:8%;right:8%;top:50%;height:3px;background:repeating-linear-gradient(90deg,var(--slate) 0,var(--slate) 8px,transparent 8px,transparent 18px);opacity:.25;border-radius:2px}.connector-dot{width:12px;height:12px;border-radius:50%;background:var(--slate);opacity:.35;position:relative;z-index:1}.card{border-radius:var(--card-radius);box-shadow:var(--card-shadow);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:relative;border:4px solid #ddd;background:var(--white);transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s,opacity .35s}.card:active{transform:scale(.94)}.card:hover{box-shadow:var(--card-shadow-hover);transform:translateY(-3px)}.card.matched,.card.matched:hover{cursor:default;pointer-events:none;transform:none}@keyframes cardEnter{0%{opacity:0;transform:translateY(30px) scale(.85)}50%{opacity:1;transform:translateY(-8px) scale(1.05)}70%{opacity:1;transform:translateY(4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.card.entering{animation:cardEnter .7s cubic-bezier(.34,1.56,.64,1) both}.word-card{width:var(--card-w);height:var(--card-h);display:flex;align-items:center;justify-content:center;font-family:Fredoka,sans-serif;font-size:40px;font-weight:700;color:var(--navy);letter-spacing:.12em;border-radius:var(--card-radius)}.word-card.selected{border-color:var(--navy);border-width:5px;box-shadow:0 8px 32px rgba(0,0,0,.15);transform:scale(1.08)}.word-card.matched{border-color:var(--green);background:var(--green-light);border-style:solid;box-shadow:0 4px 20px rgba(76,175,80,.25)}.word-card.matched:after{content:"";position:absolute;inset:-6px;border-radius:calc(var(--card-radius) + 6px);border:4px dashed var(--green);opacity:.45;pointer-events:none}.word-card.wrong{animation:shake .5s ease;border-color:var(--berry);background:#FFEBEE}.match-check{display:inline-block;color:var(--green);font-size:28px;margin-left:6px;animation:checkPop .4s cubic-bezier(.34,1.56,.64,1)}@keyframes checkPop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.image-card{width:var(--card-w);height:var(--card-h);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:16px;border-radius:var(--card-radius)}.image-card img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}.image-card .placeholder{font-size:14px;font-weight:700;color:var(--slate);text-align:center}.image-card.matched{border-color:var(--green);background:var(--green-light);border-style:solid;box-shadow:0 4px 20px rgba(76,175,80,.25)}.image-card.matched:after{content:"";position:absolute;inset:-6px;border-radius:calc(var(--card-radius) + 6px);border:4px dashed var(--green);opacity:.45;pointer-events:none}.image-card.wrong{animation:shake .5s ease;border-color:var(--berry);background:#FFEBEE}.image-card-check{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:48px;color:var(--green);font-weight:700;background:rgba(255,255,255,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:var(--card-radius);pointer-events:none;animation:checkPop .4s cubic-bezier(.34,1.56,.64,1)}.card.just-correct{border-color:var(--green)!important;background:var(--green-light)!important;box-shadow:0 4px 24px rgba(76,175,80,.35)!important;pointer-events:none;animation:correctPulse .6s ease}@keyframes correctPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translateX(0)}15%{transform:translateX(-12px)}35%{transform:translateX(12px)}55%{transform:translateX(-8px)}75%{transform:translateX(8px)}}.progress-dots{display:flex;justify-content:center;gap:12px;margin-bottom:4px}.progress-dot{width:18px;height:18px;border-radius:50%;border:3px solid var(--slate);background:transparent;transition:all .3s}.progress-dot.done{background:var(--green);border-color:var(--green)}.status-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 4px;font-size:22px}.status-bar span{gap:4px}.btn-play-again,.status-bar span{display:inline-flex;align-items:center}.btn-play-again{padding:14px 32px;background:var(--navy);color:var(--white);border:none;border-radius:30px;font-family:Fredoka,sans-serif;font-size:18px;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 6px 20px rgba(0,0,0,.12);gap:6px}.btn-play-again:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.18)}.btn-play-again:active{transform:translateY(0)}.celebration-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;display:flex;justify-content:center;align-items:center}.celebration-box{background:var(--white);border-radius:36px;padding:48px 56px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:popIn .6s cubic-bezier(.34,1.56,.64,1);max-width:440px;width:94%}@keyframes popIn{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}.celebration-box h2{font-family:Fredoka,sans-serif;font-size:32px;color:var(--navy);margin:20px 0 8px}.celebration-box .errors{font-size:18px;font-weight:700;color:var(--slate);margin-bottom:28px}.celebration-icon{font-size:80px;line-height:1;animation:emojiBounce .7s ease infinite alternate;display:inline-block}@keyframes emojiBounce{0%{transform:translateY(0)}to{transform:translateY(-14px)}}.confetti-container{position:fixed;inset:0;pointer-events:none;z-index:101;overflow:hidden}.confetti{position:absolute;border-radius:4px;animation:confettiFall linear forwards}.confetti.star{border-radius:50%;animation:confettiStar linear forwards}@keyframes confettiFall{0%{transform:translateY(-120px) rotate(0) scale(1);opacity:1}80%{opacity:1}to{transform:translateY(105vh) rotate(860deg) scale(.7);opacity:0}}@keyframes confettiStar{0%{transform:translateY(-120px) rotate(0) scale(0);opacity:1}30%{transform:translateY(10vh) rotate(180deg) scale(1.3)}to{transform:translateY(105vh) rotate(540deg) scale(.5);opacity:0}}.loading-overlay{position:absolute;inset:0;background:rgba(255,255,255,.65);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:20px;z-index:5;display:flex;align-items:center;justify-content:center;animation:loadingShow .15s ease}@keyframes loadingShow{0%{opacity:0}to{opacity:1}}.loading-overlay:after{content:"";width:40px;height:40px;border:5px solid var(--slate);border-top:5px solid transparent;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.mode-tabs{display:flex;justify-content:center;gap:12px;padding:0 0 10px;flex-shrink:0}.mode-tab{padding:14px 28px;border:4px solid #ddd;background:var(--white);border-radius:28px;cursor:pointer;font-family:Fredoka,sans-serif;font-size:16px;font-weight:700;color:var(--slate);transition:all .2s;display:inline-flex;align-items:center;gap:6px;box-shadow:0 4px 12px rgba(0,0,0,.04)}.mode-tab:hover{border-color:var(--navy);color:var(--navy)}.mode-tab.active{border-color:var(--navy);background:var(--navy);color:var(--white);box-shadow:0 6px 24px rgba(0,0,0,.15);transform:scale(1.04)}.prompt-card{margin:0 auto;flex-shrink:0}.parent-gate{position:fixed;inset:0;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:95;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px}.parent-gate span{color:var(--white);font-size:16px;font-weight:600}.parent-gate input{padding:12px 20px;border-radius:16px;border:none;font-size:18px;text-align:center;width:120px;font-family:Fredoka,sans-serif;letter-spacing:.3em}.manage-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.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:var(--white);border-radius:28px;box-shadow:0 20px 60px rgba(0,0,0,.18);width:100%;max-width:560px;max-height:85dvh;display:flex;flex-direction:column;position:relative;overflow:hidden;animation:popIn .35s cubic-bezier(.34,1.56,.64,1)}.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-size:14px;font-weight:700;color:var(--slate);margin-left:4px}.manage-toast{position:absolute;top:56px;left:50%;transform:translateX(-50%);padding:10px 24px;border-radius:20px;font-weight:700;font-size:14px;z-index:3;animation:toastIn .3s ease;white-space:nowrap;pointer-events:none}.manage-toast.success{background:var(--green-light);color:#2E7D32;border:2px solid var(--green)}.manage-toast.error{background:#FFEBEE;color:#C62828;border:2px solid var(--berry)}@keyframes toastIn{0%{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.upload-filename{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);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.btn-modal-close:hover{background:var(--berry);color:var(--white)}.add-form{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:flex-end}.add-form input{padding:10px 16px;border:3px solid #ddd;border-radius:16px;font-size:15px;background:var(--white);transition:border-color .2s}.add-form input:focus{outline:none;border-color:var(--navy)}.add-form input[type=text]{flex:1 1;min-width:120px}.add-form input[type=file]{display:none}.btn-upload{padding:10px 18px;background:var(--white);border:3px dashed #ccc;border-radius:16px;cursor:pointer;font-weight:700;font-size:14px;color:var(--slate);transition:all .2s}.btn-upload:hover{border-color:var(--navy);color:var(--navy)}.btn-add{padding:10px 24px;background:var(--navy);color:var(--white);border:none;border-radius:16px;font-weight:700;font-size:15px;cursor:pointer;transition:all .2s;box-shadow:0 4px 14px rgba(0,0,0,.12)}.btn-add:disabled{opacity:.4;cursor:not-allowed}.btn-add:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.18)}.word-list{border-top:2px 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(0,0,0,.06);font-size:16px;transition:background .15s;border-radius:14px}.word-list-item:hover{background:rgba(0,0,0,.03)}.word-list-item .thumb{width:54px;height:54px;border-radius:14px;object-fit:contain;background:#F5F5F5;border:2px solid #eee}.word-list-item .word-text{flex:1 1;font-weight:700;color:var(--navy)}.btn-delete{padding:7px 16px;background:none;border:2px solid var(--berry);color:var(--berry);border-radius:20px;cursor:pointer;font-weight:700;font-size:13px;transition:all .2s}.btn-delete:hover{background:var(--berry);color:var(--white)}.hint{font-size:13px;color:var(--slate);margin-top:14px;opacity:.7}.empty-state{text-align:center;padding:64px 24px;color:var(--slate)}.empty-state p{font-family:Fredoka,sans-serif;font-size:22px;font-weight:700;margin:16px 0}.btn-menu-toggle{display:none}.mode-menu-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:85;justify-content:center;align-items:flex-start;padding-top:60px}.mode-menu-overlay.show{display:flex}.mode-menu-box{background:var(--white);border-radius:24px;padding:20px;box-shadow:0 12px 40px rgba(0,0,0,.2);display:flex;flex-direction:column;gap:12px;animation:popIn .3s cubic-bezier(.34,1.56,.64,1)}@media (max-width:640px){:root{--card-w:160px;--card-h:160px}.word-card{font-size:32px}.container{padding:10px}.header h1{font-size:20px}.mode-tab{padding:12px 20px;font-size:14px}.card-row{gap:14px}}@media (max-width:480px){:root{--card-w:130px;--card-h:130px}.word-card{font-size:28px}.header h1{font-size:16px}.container{padding:6px}.game-area{flex-direction:row;align-items:center;justify-content:center;gap:6px}.game-area>.card-row{flex-direction:column;flex-wrap:nowrap;gap:8px;flex-shrink:0}.prompt-card{display:contents}.card-connector{width:12px;height:auto;flex-shrink:0;align-self:stretch;flex-direction:column;gap:8px;justify-content:center}.card-connector:before{left:50%!important;right:auto!important;top:6%!important;bottom:6%!important;width:3px!important;height:auto!important;background:repeating-linear-gradient(0deg,var(--slate) 0,var(--slate) 6px,transparent 6px,transparent 16px)!important;transform:translateX(-50%)!important;border-radius:2px!important;opacity:.3!important}.connector-dot{width:8px;height:8px}.mode-tabs{display:none}.btn-menu-toggle{display:flex}.btn-manage{display:none}.top-actions{top:6px;right:6px;gap:10px}.status-bar{width:100%;padding:6px 0 0}}@media (max-width:380px){:root{--card-w:105px;--card-h:105px}.word-card{font-size:24px}.container{padding:4px}.card-row{gap:5px}.game-area{gap:4px}}