:root{--color-primary: #2979FF;--color-primary-dark: #1565C0;--color-success: #00E676;--color-success-dark: #00C853;--color-warning: #FFEA00;--color-warning-dark: #FFD600;--color-danger: #FF1744;--color-danger-dark: #D50000;--color-info: #651FFF;--color-bg: #E3F2FD;--radius-l: 24px;--radius-m: 16px;--radius-s: 12px;--border-w: 3px;--btn-depth: 4px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{font-size:18px}body{font-family:Nunito,Microsoft JhengHei,sans-serif;margin:0;padding:15px;background-color:var(--color-bg);color:#333;background-image:linear-gradient(rgba(255,255,255,.5) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.5) 2px,transparent 2px);background-size:40px 40px;min-height:100vh;line-height:1.6}.step-marker,.navigation{display:none!important}.container{max-width:800px;margin:0 auto;background:#fff;border-radius:var(--radius-l);padding:25px;box-shadow:0 15px 30px #3b82f626;border:4px solid #fff;position:relative}h1,h2,h3{margin:0;font-weight:900;color:#37474f}.header-wrapper{position:relative;text-align:center;margin-top:15px;margin-bottom:35px;padding:0 50px;min-height:50px;display:flex;align-items:center;justify-content:center}h1{font-size:2.4rem;color:var(--color-primary-dark);text-shadow:3px 3px 0 #fff;line-height:1.3}.btn-help{position:absolute;top:50%;right:0;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:3px solid var(--color-info);background:#fff;color:var(--color-info);font-weight:900;font-size:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px #d1c4e9;padding:0;z-index:10}.btn-help:active{transform:translateY(3px);box-shadow:none}button,.btn,.grade-btn,.level-tab,.shop-buy-btn,.quest-claim-btn,.control-button,.btn-update-length,.quit-btn,.next-question-btn,.check-btn{font-family:inherit;font-weight:800;font-size:16px;border:none;border-radius:var(--radius-m);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 16px;color:#fff;position:relative;transition:filter .1s;box-shadow:0 4px #00000026;transform:translateY(0);-webkit-user-select:none;user-select:none;background-color:var(--color-primary)}button:active:not(:disabled),.level-tab.active,.grade-btn.active{transform:translateY(4px);box-shadow:0 0 0 transparent}button:disabled{background-color:#e0e0e0!important;color:#9e9e9e!important;box-shadow:none!important;transform:translateY(4px);cursor:not-allowed}button:hover:not(:disabled){filter:brightness(1.1)}.top-section-wrapper{display:flex;flex-direction:column;gap:15px;margin-bottom:20px}.install-guide-container{background:#e0f2f1;border:2px dashed #80CBC4;border-radius:var(--radius-m);padding:10px 15px;font-size:15px;color:#00695c;display:flex;justify-content:center}.install-guide-header{display:flex;justify-content:space-between;font-weight:700;cursor:pointer;width:100%;align-items:center}.auth-container{display:flex;flex-direction:column;align-items:flex-end;gap:10px;background:transparent;padding:0;border:none;box-shadow:none}#userInfo{font-size:15px;font-weight:700;color:#666;background:#f5f5f5;padding:8px 15px;border-radius:20px;margin:0;white-space:nowrap}#authButton,#signOutButton,#fbButton{font-size:14px;padding:0 15px;height:38px;background-color:#fff;color:#555;border:1px solid #ccc;box-shadow:0 2px #bbb;border-radius:20px;white-space:nowrap;transform:none}#fbButton{background-color:#1877f2;color:#fff;border:none;box-shadow:0 2px #0d47a1}#authButton img,#fbButton img{height:16px;width:16px;margin-right:5px}.active-checkin-btn{font-size:1.2rem!important}.level-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px;background:#f3e5f5;padding:15px;border-radius:var(--radius-m);border:2px dashed #E1BEE7}.level-tab{background-color:#fff;color:#666;border:2px solid #eee;box-shadow:0 3px #ddd;padding:10px 5px;font-size:16px}.level-tab.active{background-color:var(--color-info);color:#fff;border-color:var(--color-info);box-shadow:none;transform:translateY(3px)}.hanlin-panel{background-color:#e0f7fa;border:3px solid #4DD0E1;border-radius:var(--radius-m);padding:20px;margin-bottom:20px}.hanlin-panel p{font-size:1.2rem;color:#0097a7;font-weight:800;border-bottom:2px dashed #80DEEA;margin-bottom:15px}.hanlin-grades{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:15px}.grade-btn{background:#fff;color:var(--color-success-dark);border:2px solid var(--color-success);box-shadow:0 3px #b9f6ca;font-size:16px;padding:12px}.grade-btn.active{background:var(--color-success);color:#fff;box-shadow:none}.unit-checkbox-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;background:#fff;padding:15px;border-radius:var(--radius-s);margin-bottom:15px;border:2px solid #E5E7EB}.unit-checkbox-item{padding:10px;border:2px solid #F3F4F6;border-radius:10px;cursor:pointer;font-size:16px;font-weight:700;display:flex;align-items:center}.unit-checkbox-item input{transform:scale(1.3);margin-right:8px}.unit-controls{display:flex;gap:10px}.unit-controls .btn-start-quiz{flex:2;background-color:var(--color-success);box-shadow:0 4px 0 var(--color-success-dark);font-size:18px}.btn-back{width:100%;background-color:#9ca3af;box-shadow:0 4px #6b7280;margin-top:10px;font-size:16px}.controls-trigger,.stats-trigger{padding:15px;background-color:#f5f5f5;font-size:18px;font-weight:700;text-align:center;cursor:pointer;border-bottom:2px solid #E0E0E0;margin:0}.controls-content{padding:20px;display:flex;flex-direction:column;gap:15px}.main-control-group{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}.control-button{flex:1 1 30%;min-width:120px;background:var(--color-primary);display:flex;flex-direction:column;padding:15px 10px;line-height:1.3;font-size:16px}.control-button .button-icon{font-size:24px;margin-bottom:5px}.control-button .button-text{font-size:14px}.control-button.is-danger{background:var(--color-danger);box-shadow:0 4px 0 var(--color-danger-dark)}.quiz-length-control{display:flex;align-items:center;justify-content:center;gap:10px;background:#fafafa;padding:15px;border-radius:var(--radius-s);border:2px solid #EEE;flex-wrap:wrap}.quiz-length-control label{font-weight:700;color:#555;font-size:16px;white-space:nowrap}.quiz-length-control input{width:90px;padding:10px;border:2px solid #ddd;border-radius:8px;text-align:center;font-weight:700;font-size:20px}.btn-update-length{padding:10px 25px;font-size:16px;white-space:nowrap;min-width:fit-content}.gamification-wrapper{display:grid;grid-template-columns:1.3fr .7fr;gap:15px;margin-bottom:30px}.pet-container,.badge-container{background:#fff;border:3px solid #E0E0E0;border-radius:var(--radius-m);box-shadow:0 6px #e0e0e0;display:flex;flex-direction:column;overflow:hidden}.pet-header,.badge-header{background-color:#fafafa;padding:15px;text-align:center;font-size:18px;font-weight:800;color:#757575;border-bottom:2px solid #EEE}.pet-content{padding:20px;display:flex;flex-direction:column;align-items:center;text-align:center;flex-grow:1}.pet-image-frame{position:relative;width:110px;height:110px;background:#fff8e1;border:4px solid var(--color-warning);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:15px;box-shadow:0 4px #ffca28;margin-left:auto;margin-right:auto}.pet-image{font-size:60px;animation:bounce 2s infinite}.pet-cosmetic{position:absolute;top:-35px;left:50%;transform:translate(-50%);font-size:3em;z-index:10;filter:drop-shadow(2px 2px 2px rgba(0,0,0,.3));pointer-events:none;width:100%;text-align:center}.pet-name{font-size:22px!important;font-weight:900;margin-bottom:5px;color:#424242}.xp-bar,.hunger-bar{width:100%;height:16px;background:#f5f5f5;border-radius:10px;margin:8px 0;overflow:hidden;border:2px solid #EEE}.xp-bar-fill{height:100%;background:linear-gradient(to right,#69f0ae,#00c853);transition:width .5s}.hunger-bar-fill{height:100%;background:linear-gradient(to right,#ffd740,#ffab00);transition:width .5s}.xp-text,.hunger-text{font-size:14px!important;color:#666;font-weight:700}.pet-button-group{display:flex!important;flex-direction:row!important;gap:10px;width:100%;margin-top:15px}.pet-button-group .badge-button{flex:1;margin:0;width:auto;padding:12px;font-size:15px}.badge-button-group{padding:15px;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}.badge-button{background-color:var(--color-warning);color:#5d4037;box-shadow:0 4px #ffb300;font-size:15px;padding:12px 5px;width:100%;flex-direction:column}.badge-button-icon{font-size:1.8em;margin-bottom:4px}.badge-button-text{font-size:1.1em}.data-buttons-group{padding:0 15px 15px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.btn-export,.btn-import{padding:10px;font-size:14px}.btn-export{background-color:var(--color-primary);box-shadow:0 4px 0 var(--color-primary-dark)}.btn-import{background-color:#8d6e63;box-shadow:0 4px #5d4037}.word-card{background:#fff;border:4px solid #E0E7FF;border-radius:var(--radius-l);padding:40px 20px;text-align:center;margin-bottom:30px;min-height:380px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 8px #c7d2fe;position:relative}.word-card.correct{border-color:var(--color-success);background-color:#ecfdf5;box-shadow:0 8px #a7f3d0}.word-card.incorrect{border-color:var(--color-danger);background-color:#fef2f2;box-shadow:0 8px #fecaca;animation:shake .4s}.word-number{position:absolute;top:20px;left:25px;font-size:18px;font-weight:800;color:#9ca3af}.word-display{font-size:64px;font-weight:900;color:var(--text-main);margin-bottom:30px;font-family:Arial Rounded MT Bold,sans-serif;letter-spacing:1px}.word-input{width:100%;padding:15px;border:4px solid #CFD8DC;border-radius:var(--radius-m);font-size:28px;text-align:center;outline:none;background-color:#eceff1;margin-bottom:20px;color:#37474f;font-weight:700}.word-input:focus{border-color:var(--color-primary);background-color:#fff;box-shadow:0 0 0 4px #3b82f633}.speak-btn-group{display:flex;gap:10px;justify-content:center;margin-bottom:20px}.speak-btn{background-color:var(--color-info);box-shadow:0 4px 0 var(--color-info-dark);padding:10px 25px;border-radius:50px;font-size:16px}.check-btn{width:100%;font-size:24px;padding:16px;background-color:var(--color-warning);color:#3e2723;box-shadow:0 5px 0 var(--color-warning-dark)}.result{font-size:32px;font-weight:900;margin-bottom:15px;text-align:center}.result.correct{color:var(--color-success-dark)}.result.incorrect{color:var(--color-danger-dark)}.translation-display{font-size:26px;font-weight:800;color:var(--color-primary-dark);background:#e3f2fd;padding:15px;border-radius:var(--radius-m);border:2px dashed #90CAF9;margin-top:15px;cursor:pointer;text-align:center}.sentence-display{margin-top:20px;padding:15px;background:#fafafa;border-radius:15px}.sentence-en{font-size:20px;color:#333;line-height:1.5;display:block;margin-bottom:8px}.sentence-zh{font-size:18px;color:#666}.nav-btn{font-size:20px;padding:12px 30px;margin-top:10px}.stat-info{display:grid;grid-template-columns:repeat(5,1fr);background:#fff;padding:15px;border-radius:var(--radius-m);border:2px solid #EEEEEE;gap:10px;margin-top:20px;box-shadow:0 4px #e0e0e0}.stat-item{text-align:center}.stat-label{font-size:14px;color:#9e9e9e}.stat-number{font-size:20px;font-weight:900;color:var(--color-primary)}.btn-share{display:block;margin:20px auto 0;width:fit-content;min-width:250px;background:linear-gradient(45deg,var(--color-warning),#FB8C00);color:#3e2723;box-shadow:0 4px #e65100;font-size:18px;padding:12px 30px}.modal-overlay{position:fixed;inset:0;background:#263238d9;z-index:5000;display:none;align-items:center;justify-content:center;padding:15px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal-content-wrapper{background:#fff;border-radius:30px;padding:25px;width:600px;max-width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 20px #0000001a;border:4px solid #ECEFF1;animation:pop .3s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;font-size:16px}.modal-content-wrapper h2{font-size:2rem;margin-bottom:15px}.modal-buttons{display:flex;justify-content:center;gap:15px;margin-top:25px;width:100%}.btn-save,.btn-cancel{width:120px;padding:12px;font-size:16px}.btn-save{background-color:var(--color-success);box-shadow:0 4px 0 var(--color-success-dark)}.btn-cancel{background-color:#b0bec5;box-shadow:0 4px #78909c}.quest-item,.shop-item,.equip-slot{background:#fff;border:2px solid #F5F5F5;border-radius:16px;padding:15px;margin-bottom:10px;display:grid;gap:15px;box-shadow:0 3px #eee;align-items:center}.quest-item{grid-template-columns:1fr auto}.shop-item{grid-template-columns:60px 1fr 100px;text-align:left;font-size:15px}.shop-item-name{font-size:1.2rem;font-weight:700}.shop-item-desc{font-size:.95rem;color:#666}.shop-buy-btn{font-size:15px;padding:8px 16px}.inventory-equipment-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.equip-slot-name{font-size:1.1rem;font-weight:700;color:#555;margin-bottom:5px}#bossRematchModal .modal-content-wrapper{background:#263238;color:#fff;border:4px solid #FF5252}#bossRematchModal h2{color:#ff5252}#bossRematchModal p{font-size:1.1rem}#bossRematchModal .boss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:15px;padding:10px}.boss-card{background:#37474f;border:2px solid #546E7A;border-radius:15px;padding:20px 15px;text-align:center;cursor:pointer;transition:all .2s;box-shadow:0 5px #1c2428;position:relative;overflow:hidden}.boss-card:hover{transform:translateY(-5px);border-color:#ff5252;background:#455a64;box-shadow:0 5px #b71c1c}.boss-card-icon{font-size:3.5em;margin-bottom:10px}.boss-card-name{font-weight:700;font-size:1.2em;color:#fff}.boss-battle-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000f2;z-index:10000;display:flex;align-items:center;justify-content:center}.boss-battle-arena{width:100%;max-width:650px;background:#263238;border:5px solid var(--color-warning);border-radius:30px;box-shadow:0 0 60px #ffd60080;color:#fff}.battle-header{background:#1c2428;padding:20px 25px;border-bottom:3px solid var(--color-warning);display:flex;justify-content:space-between;align-items:center}.battle-header h3{color:var(--color-warning);font-size:1.8rem}.battle-quit-btn{background:var(--color-danger);box-shadow:0 4px 0 var(--color-danger-dark);font-size:16px}.battle-zone{display:flex;justify-content:space-around;padding:25px;gap:15px}.battle-combatant{flex:1;background:#ffffff0d;padding:20px;border-radius:20px;text-align:center;border:2px solid rgba(255,255,255,.1)}.combatant-name{font-size:1.1rem;font-weight:700;margin-top:5px}.boss-battle-arena .word-display{color:var(--color-warning);font-size:48px}.boss-battle-arena .word-input{background:#455a64;border-color:#607d8b;color:#fff;font-size:26px}.skill-bar{display:flex;justify-content:center;gap:15px;padding:15px;background:#0000004d}.skill-btn{width:70px;height:80px;padding:5px;flex-direction:column;background:#374151;border:2px solid #4B5563;box-shadow:0 4px #1f2937}.badge-grid,.quest-list,.shop-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:15px;margin-top:20px}.badge-item{border:2px solid #eee;border-radius:12px;padding:15px;text-align:center}@media(max-width:600px){html{font-size:16px}.container{padding:15px;border-width:3px}h1{font-size:2rem;margin-bottom:15px}.auth-container{justify-content:space-between;flex-direction:column;align-items:flex-end}#userInfo{margin-bottom:5px}.level-tabs{grid-template-columns:repeat(3,1fr);padding:10px;gap:8px}.level-tab{font-size:14px;padding:10px 2px}.gamification-wrapper{grid-template-columns:1fr;gap:15px}.word-display{font-size:50px}.translation-display{font-size:24px}.word-input{font-size:26px;padding:12px}.speak-btn{padding:10px 20px;font-size:15px}.check-btn{font-size:22px;padding:15px}.inventory-equipment-grid{grid-template-columns:1fr}.shop-item{grid-template-columns:50px 1fr 80px;text-align:left}.shop-item-buy{align-items:center;margin-top:0;flex-direction:column}.battle-zone{flex-direction:column;gap:10px}.battle-combatant{width:100%}.combatant-image{font-size:3em}.word-display{font-size:36px}.quiz-option-btn{min-height:60px;font-size:18px;padding:15px}.choice-question{font-size:26px}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes pop{0%{transform:scale(.8);opacity:0}70%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}.shake-error{animation:shake .3s}.boss-damaged{animation:shake .3s;filter:brightness(2) sepia(1) saturate(5) hue-rotate(-50deg)}.damage-number{position:absolute;font-size:3.5rem;font-weight:900;color:var(--color-danger);text-shadow:3px 3px 0 #000;animation:pop .5s forwards;z-index:9999}