:root{font-family:Nunito,Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif;line-height:1.4;font-weight:500;color:#1f2933;background-color:#eaf2ff;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--app-max-width: 1280px;--app-padding: clamp(16px, 3vw, 32px);--surface-color: #ffffff;--surface-alt: #f3f7ff;--accent: #ff91b8;--accent-strong: #ff709f;--muted: #6b7280;--divider: rgba(15, 23, 42, .08)}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(120% 120% at 50% 10%,#fff1f8cc,#cee2ffcc);color:inherit}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:3px solid rgba(255,129,172,.6);outline-offset:4px}button{font-family:inherit}#root{min-height:100vh;display:flex;justify-content:center}.app-shell{width:100%;max-width:var(--app-max-width);min-height:100vh;display:flex;flex-direction:column;padding:clamp(12px,2vw,24px) clamp(16px,3vw,40px) clamp(72px,8vh,96px);gap:32px}@media (max-width: 900px){.app-shell{padding-bottom:120px}}.app-shell__main{flex:1;display:flex}.screen{width:100%;display:flex;flex-direction:column;background:#ffffffd9;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:32px;padding:clamp(24px,3vw,40px);box-shadow:0 18px 42px #577eff1f}.screen__header{display:flex;flex-direction:column;gap:8px;padding-bottom:24px}.screen__header h1{margin:0;font-size:clamp(28px,3.2vw,42px);color:#1e293b;text-align:center}.screen__header h1 small{font-size:clamp(16px,2vw,22px);color:var(--muted);margin-left:8px}.screen__header p{margin:0;color:var(--muted);font-size:clamp(16px,1.6vw,18px);text-align:center}.screen__content{flex:1;display:flex}.categories-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:clamp(16px,2vw,24px)}@media (min-width: 1024px){.categories-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}.category-card{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--surface-color);border-radius:24px;box-shadow:0 10px 24px #83a4ff2e;transition:transform .2s ease,box-shadow .2s ease}.category-card img,.category-card .cover-fallback{width:100%;aspect-ratio:4 / 3;border-radius:16px;object-fit:cover;background:var(--surface-alt)}.category-card__body{display:flex;flex-direction:column;gap:4px;text-align:center}.category-card__title{font-size:clamp(18px,2vw,22px);font-weight:700}.category-card__subtitle{font-size:16px;color:var(--muted)}.category-card__meta{margin-top:4px;font-size:14px;color:#1e293b99}.category-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px #83a4ff47}.category-card:active{transform:scale(.98)}.screen__header--detail{gap:6px}.breadcrumbs{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}.words-grid{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-content:space-between}@media (max-width: 1023px){.words-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}.word-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;border-radius:28px;background:#f8fafc;box-shadow:0 12px 28px #577eff29}.word-card__media{width:100%;aspect-ratio:4 / 3;border-radius:20px;overflow:hidden;background:var(--surface-alt);cursor:pointer}.word-card__media img{width:100%;height:100%;object-fit:cover}.word-card__label{font-size:clamp(18px,1.8vw,22px);font-weight:700;text-transform:lowercase}.word-card__texts{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.word-card__translation{font-size:clamp(14px,1.6vw,18px);color:#1e293b99}.word-card__translation-with-audio{display:flex;align-items:center;gap:8px;margin-top:4px}.word-card__audio{border:none;width:32px;height:32px;border-radius:50%;background:#bfdbfe;box-shadow:0 4px 10px #577eff2e;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease;flex-shrink:0}.word-card__audio img{width:16px;height:16px}.word-card__audio:disabled{opacity:.4;cursor:not-allowed}.word-card__audio:not(:disabled):active{transform:scale(.92)}.modes-stack{display:grid;gap:24px}.mode-card{display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2.5vw,28px);border-radius:28px;background:#e0f2fe;color:#1f2937;font-size:clamp(20px,2.5vw,26px);font-weight:700;box-shadow:0 10px 24px #ff8cbd38}.mode-card small{font-size:clamp(14px,1.5vw,18px);font-weight:500;color:#1e293bb3}.placeholder-panel{width:100%;min-height:240px;border-radius:28px;background:var(--surface-alt);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:18px;color:var(--muted)}.tab-bar{position:sticky;bottom:clamp(12px,2vh,24px);align-self:center;display:grid;grid-auto-flow:column;gap:20px;background:#ffffffe6;padding:12px 18px;border-radius:28px;box-shadow:0 14px 36px #577eff3d}.tab-bar__item{min-width:140px;padding:12px 20px;text-align:center;border-radius:20px;font-size:18px;font-weight:700;color:#1e293bbf;transition:background .2s ease,color .2s ease}.tab-bar__item.is-active{background:#fecaca;color:#1e1b4b;box-shadow:inset 0 2px 8px #ffffff8c}@media (max-width: 720px){.tab-bar{width:calc(100% - 32px);position:fixed;left:16px;right:16px}}.activity-screen{width:100%;display:flex;flex-direction:column;background:#ffffffe6;border-radius:36px;padding:clamp(24px,3vw,40px);gap:clamp(20px,2.5vw,28px);box-shadow:0 18px 42px #577eff24}.activity-header{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}.activity-header .back-link{font-size:28px;color:#1e293bb3;text-decoration:none}.activity-title{display:flex;flex-direction:column;gap:6px}.activity-title h1{margin:0;font-size:clamp(24px,2.6vw,34px);text-align:center}.activity-title span{font-size:clamp(16px,1.8vw,20px);color:#1e293b99;text-align:center}.activity-progress{grid-column:1 / -1;height:8px;background:#0f172a14;border-radius:999px;overflow:hidden}.activity-progress__bar{height:100%;background:#93c5fd;border-radius:999px;transition:width .3s ease}.activity-body{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2vw,24px)}.prompt-word{display:flex;align-items:center;gap:16px;font-size:clamp(32px,4vw,42px);font-weight:800;text-transform:lowercase;color:#1f2937}.prompt-word__text{cursor:pointer}.prompt-word__audio{width:56px;height:56px;border-radius:50%;border:none;background:#bfdbfe;display:flex;align-items:center;justify-content:center;cursor:pointer}.prompt-word__audio img{width:24px;height:24px}.prompt-subtitle{margin:0;font-size:clamp(16px,1.8vw,20px);color:#1e293bad;text-align:center}.option-grid{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.8vw,20px)}.option-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:24px;background:#f6f9ff;border:4px solid transparent;box-shadow:0 14px 30px #83a4ff38;cursor:pointer;font-size:clamp(18px,1.8vw,22px);font-weight:700;color:#1f2937}.option-card span{text-transform:lowercase}.option-card small{font-size:clamp(14px,1.6vw,18px);color:#1e293b99;text-align:center}.option-card img{width:100%;aspect-ratio:5 / 4;border-radius:20px;object-fit:cover}.option-card.is-correct{border-color:#4ade80e6}.option-card.is-wrong{border-color:#f87171e6}.option-card:disabled{opacity:.7}.option-indicator{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%}.option-indicator--success{background:url('data:image/svg+xml,%3Csvg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="18" cy="18" r="18" fill="%234ADE80"/%3E%3Cpath d="M11 18.5L15.5 23L25 13" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') center/contain no-repeat}.option-indicator--error{background:url('data:image/svg+xml,%3Csvg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="18" cy="18" r="18" fill="%23F87171"/%3E%3Cpath d="M13 13L23 23" stroke="white" stroke-width="3" stroke-linecap="round"/%3E%3Cpath d="M23 13L13 23" stroke="white" stroke-width="3" stroke-linecap="round"/%3E%3C/svg%3E') center/contain no-repeat}.activity-body.is-matching{flex-direction:row;align-items:stretch;justify-content:center;gap:clamp(24px,3vw,48px)}.matching-column{display:grid;gap:clamp(10px,1.2vw,16px)}.matching-column--words,.matching-column--images{width:clamp(160px,16vw,200px)}.matching-card{border-radius:20px;padding:12px;border:3px solid transparent;background:#ffffffd9;box-shadow:0 12px 24px #83a4ff33;cursor:pointer;transition:transform .15s ease,border .3s ease,opacity .3s ease}.matching-card.is-active{border-color:#3b82f6}.matching-card.is-removed{opacity:.2;pointer-events:none}.word-card{font-size:clamp(20px,2vw,24px);font-weight:700;text-transform:lowercase;text-align:center}.image-card{padding:12px}.image-card img{width:100%;border-radius:18px;object-fit:cover}.activity-footer{display:flex;justify-content:center;margin-top:auto}.primary-button{min-width:clamp(200px,24vw,280px);padding:16px 24px;border-radius:999px;border:none;font-size:clamp(18px,2vw,22px);font-weight:700;color:#fff;background:#60a5fa;box-shadow:0 18px 30px #5e99ff59;cursor:pointer}.activity-body.is-flashcard{gap:clamp(16px,2vw,24px)}.flashcard{width:clamp(220px,22vw,280px);aspect-ratio:1 / 1;border-radius:28px;overflow:hidden;box-shadow:0 18px 36px #83a4ff42;cursor:pointer}.flashcard img{width:100%;height:100%;object-fit:cover}.flashcard-info{display:flex;flex-direction:column;align-items:center;gap:8px}.flashcard-word{font-size:clamp(26px,3.2vw,36px);font-weight:800;cursor:pointer}.flashcard-ipa{font-size:clamp(16px,2vw,20px);color:#1e293bb3}.flashcard-translate{font-size:clamp(18px,2.2vw,24px);color:#1e293b99}.flashcard-audio{padding:8px 16px;border-radius:999px;border:none;background:#5e99ff26;display:flex;align-items:center;justify-content:center;cursor:pointer}.flashcard-audio img{width:24px;height:24px}.matching-card--word{display:flex;align-items:center;justify-content:center;min-height:70px}.matching-card--word .word-card__label{font-size:clamp(22px,2.6vw,30px);font-weight:600;text-align:center}.matching-card--word .word-card__translation{font-size:clamp(14px,1.6vw,18px);color:#1e293b99;text-align:center}.modes-horizontal{display:flex;flex-direction:column;gap:16px;width:100%}.mode-button-horizontal{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:clamp(80px,8vh,100px);padding:clamp(16px,2vw,24px);border-radius:20px;background:#e0f2fe;color:#1f2937;text-decoration:none;transition:all .3s ease;border:2px solid transparent}.mode-button-horizontal:hover{transform:translateY(-2px);border-color:#fbbf24}.mode-button-horizontal:active{transform:translateY(0);border-color:#f59e0b}.mode-button-horizontal__title{font-size:clamp(22px,2.8vw,28px);font-weight:700;color:#1f2937;margin-bottom:4px;text-align:center}.mode-button-horizontal__subtitle{font-size:clamp(14px,1.6vw,18px);font-weight:500;color:#1e293bb3;text-align:center}@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){.modes-horizontal{gap:20px;flex:1;justify-content:space-evenly}.mode-button-horizontal{min-height:clamp(120px,16vh,140px);padding:clamp(20px,3vw,32px);flex:1;max-height:25vh}.mode-button-horizontal__title{font-size:clamp(42px,5.2vw,55px);text-align:center}.mode-button-horizontal__subtitle{font-size:clamp(26px,3.25vw,34px);text-align:center}}@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){.mode-button-horizontal{min-height:clamp(90px,10vh,110px);padding:clamp(18px,2.5vw,28px)}.mode-button-horizontal__title{font-size:clamp(24px,3vw,32px);text-align:center}.mode-button-horizontal__subtitle{font-size:clamp(16px,1.8vw,20px);text-align:center}}@media (min-width: 1024px) and (max-height: 800px){.modes-horizontal{gap:12px}.mode-button-horizontal{min-height:clamp(70px,7vh,85px);padding:clamp(14px,1.8vw,20px)}}@media (min-width: 600px) and (max-width: 768px){.activity-screen{gap:clamp(14px,1.8vw,20px);padding:clamp(20px,2.5vw,32px)}.option-grid{gap:clamp(10px,1.2vw,16px)}.option-card{gap:6px;padding:12px;border-radius:20px}.option-card img{aspect-ratio:3 / 2;border-radius:18px}.option-indicator{width:28px;height:28px;top:10px;right:10px}.activity-body.is-matching{gap:clamp(16px,2vw,24px)}.matching-column{gap:clamp(8px,1vw,14px)}.matching-column--words,.matching-column--images{width:clamp(140px,14vw,180px)}.matching-card{padding:10px;border-radius:18px}.matching-card--word{min-height:60px}.matching-card--word .word-card__label{font-size:clamp(20px,2.4vw,28px)}.image-card{padding:6px}.image-card img{border-radius:12px}.activity-body.is-flashcard{gap:clamp(12px,1.5vw,18px)}.flashcard{width:clamp(180px,18vw,220px);border-radius:24px}.flashcard-info{gap:6px}.flashcard-word{font-size:clamp(22px,2.6vw,30px)}.flashcard-ipa{font-size:clamp(14px,1.8vw,18px)}.flashcard-translate{font-size:clamp(16px,2vw,22px)}.flashcard-audio{padding:6px 14px}.flashcard-audio img{width:20px;height:20px}}@media (min-width: 768px) and (max-width: 1024px){.activity-screen{gap:clamp(16px,2vw,24px)}.option-grid{gap:clamp(12px,1.4vw,18px)}.option-card{gap:7px;padding:13px;border-radius:22px}.option-card img{aspect-ratio:5 / 4;border-radius:19px}.option-indicator{width:30px;height:30px;top:11px;right:11px}.activity-body.is-matching{gap:clamp(18px,2.2vw,28px)}.matching-column{gap:clamp(9px,1.1vw,15px)}.matching-column--words,.matching-column--images{width:clamp(150px,15vw,190px)}.matching-card{padding:11px;border-radius:19px}.matching-card--word{min-height:65px}.matching-card--word .word-card__label{font-size:clamp(21px,2.5vw,29px)}.image-card img{border-radius:13px}.activity-body.is-flashcard{gap:clamp(13px,1.6vw,19px)}.flashcard{width:clamp(190px,19vw,230px);border-radius:25px}.flashcard-info{gap:6.5px}.flashcard-word{font-size:clamp(23px,2.7vw,31px)}.flashcard-ipa{font-size:clamp(14.5px,1.85vw,18.5px)}.flashcard-translate{font-size:clamp(16.5px,2.05vw,22.5px)}.flashcard-audio{padding:6.5px 14.5px}.flashcard-audio img{width:21px;height:21px}}@media (min-width: 1024px) and (max-height: 800px){.activity-screen{gap:clamp(12px,1.5vw,18px);padding:clamp(18px,2.2vw,28px)}.option-grid{gap:clamp(8px,1vw,14px)}.option-card{gap:5px;padding:10px;border-radius:18px}.option-card img{aspect-ratio:5 / 4;border-radius:16px}.option-indicator{width:26px;height:26px;top:8px;right:8px}.activity-body.is-matching{gap:clamp(14px,1.6vw,22px)}.matching-column{gap:clamp(7px,.8vw,12px)}.matching-column--words,.matching-column--images{width:clamp(130px,12vw,170px)}.matching-card{padding:8px;border-radius:16px}.matching-card--word{min-height:55px}.matching-card--word .word-card__label{font-size:clamp(18px,2.2vw,26px)}.image-card{padding:5px}.image-card img{border-radius:10px}.activity-body.is-flashcard{gap:clamp(10px,1.2vw,16px)}.flashcard{width:clamp(160px,15vw,200px);border-radius:22px}.flashcard-info{gap:5px}.flashcard-word{font-size:clamp(20px,2.4vw,28px)}.flashcard-ipa{font-size:clamp(13px,1.6vw,16px)}.flashcard-translate{font-size:clamp(15px,1.8vw,20px)}.flashcard-audio{padding:5px 12px}.flashcard-audio img{width:18px;height:18px}}@media (min-width: 1024px) and (min-height: 801px) and (max-width: 1366px){.activity-screen{gap:clamp(14px,1.6vw,20px)}.option-grid{gap:clamp(10px,1.2vw,16px)}.option-card{gap:6px;padding:12px;border-radius:20px}.option-card img{aspect-ratio:5 / 4;border-radius:18px}.option-indicator{width:28px;height:28px;top:10px;right:10px}.activity-body.is-matching{gap:clamp(16px,1.8vw,24px)}.matching-column{gap:clamp(8px,1vw,14px)}.matching-column--words,.matching-column--images{width:clamp(140px,13vw,180px)}.matching-card{padding:10px;border-radius:18px}.matching-card--word{min-height:60px}.matching-card--word .word-card__label{font-size:clamp(20px,2.3vw,28px)}.image-card img{border-radius:12px}.activity-body.is-flashcard{gap:clamp(12px,1.4vw,18px)}.flashcard{width:clamp(180px,16vw,220px);border-radius:24px}.flashcard-info{gap:6px}.flashcard-word{font-size:clamp(22px,2.5vw,30px)}.flashcard-ipa{font-size:clamp(14px,1.7vw,18px)}.flashcard-translate{font-size:clamp(16px,1.9vw,22px)}.flashcard-audio{padding:6px 13px}.flashcard-audio img{width:20px;height:20px}}.reward-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.reward-modal{background:#fff;border-radius:32px;padding:clamp(32px,4vw,48px);max-width:90vw;width:400px;text-align:center;box-shadow:0 25px 50px #00000040;transform:scale(.8);opacity:0;transition:all .5s cubic-bezier(.34,1.56,.64,1)}.reward-modal.show{transform:scale(1);opacity:1}.reward-content{display:flex;flex-direction:column;align-items:center;gap:20px}.reward-icon{font-size:clamp(48px,6vw,64px);animation:bounce 1s ease-in-out infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-20px)}60%{transform:translateY(-10px)}}.reward-title{font-size:clamp(28px,3.5vw,36px);font-weight:800;color:#a78bfa;margin:0;text-align:center}.reward-subtitle{font-size:clamp(16px,2vw,20px);color:#6b7280;margin:0;line-height:1.5;text-align:center}.reward-buttons{display:flex;flex-direction:column;gap:16px;width:100%;margin-top:8px}.reward-button{padding:clamp(16px,2vw,20px);border-radius:16px;border:none;font-size:clamp(16px,2vw,18px);font-weight:700;cursor:pointer;text-decoration:none;text-align:center;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px}.reward-button--primary{background:#a78bfa;color:#fff;box-shadow:0 10px 25px #667eea4d}.reward-button--primary:hover{transform:translateY(-2px);box-shadow:0 15px 35px #667eea66}.reward-button--secondary{background:linear-gradient(135deg,#ffa9c547,#a6caff5c);color:#1f2937;box-shadow:0 10px 25px #ff8cbd33}.reward-button--secondary:hover{transform:translateY(-2px);box-shadow:0 15px 35px #ff8cbd4d}.firework-particle{animation:sparkle .8s ease-out forwards}@keyframes sparkle{0%{transform:scale(0) rotate(0);opacity:1}50%{transform:scale(1.2) rotate(180deg);opacity:.8}to{transform:scale(0) rotate(360deg);opacity:0}}@media (max-width: 480px){.reward-modal{padding:24px;width:85vw;margin:20px}.reward-buttons{flex-direction:column}.reward-button{width:100%}}