*{margin:0;padding:0;box-sizing:border-box}:root{font-family:Microsoft JhengHei,微軟正黑體,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang TC,sans-serif;line-height:1.3;font-weight:600;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;width:100vw;height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);overflow:hidden}#root{height:100vh;width:100vw;overflow:hidden}.app{height:100vh;width:100vw;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2vh;gap:3vh;overflow:hidden}.header{text-align:center}.title{font-size:8rem;font-weight:900;margin:0 0 30px;color:#00d4ff;text-shadow:4px 4px 8px rgba(0,0,0,.3);letter-spacing:8px}.subtitle{font-size:4rem;margin:0;color:#e0f7ff;font-weight:600;letter-spacing:4px}.game-selection{display:flex;flex-direction:column;gap:3vh;width:100%;max-width:1600px;align-items:center;flex:1;justify-content:center}.game-button{width:70%;max-width:1400px;min-width:300px;padding:3vh 4vw;border:none;border-radius:5vmin;cursor:pointer;transition:all .4s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 2vh 6vh #0006;display:flex;flex-direction:column;align-items:center;gap:1.5vh;flex-shrink:0}.game-button:hover{transform:translateY(-1.5vh) scale(1.03);box-shadow:0 3vh 8vh #00000080}.game-button:active{transform:translateY(-.8vh) scale(1.01)}.game-button-1{background:linear-gradient(135deg,#00d4ff,#09f)}.game-button-2{background:linear-gradient(135deg,#ff9a56,#ff6a4d)}.game-button-3{background:linear-gradient(135deg,#a8edea,#fed6e3)}.emoji{font-size:10vmin;filter:drop-shadow(.4vmin .4vmin .8vmin rgba(0,0,0,.3))}.game-title{font-size:5vmin;font-weight:900;color:#fff;text-shadow:.4vmin .4vmin .8vmin rgba(0,0,0,.3);letter-spacing:.5vmin}.footer{flex-shrink:0}.footer p{font-size:2.5vmin;color:#e0f7ff;margin:0;font-weight:600;letter-spacing:.2vw}@media(max-width:768px){.game-button{width:85%;min-width:250px;padding:2.5vh 5vw}.emoji{font-size:12vmin}.game-title{font-size:6vmin}}@media(max-height:600px){.game-selection{gap:2vh}.game-button{padding:2vh 3vw;gap:1vh}.emoji{font-size:8vmin}.game-title{font-size:4vmin}}.zhuyin-game{height:100vh;width:100vw;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;position:relative}.zhuyin-header{position:absolute;top:3vh;left:0;right:0;width:100%;display:flex;align-items:center;justify-content:center}.back-button{position:absolute;left:2vw;top:3vh;padding:2vh 3vw;font-size:3rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:25px;cursor:pointer;transition:all .3s ease;box-shadow:0 10px 30px #0000004d}.back-button:hover{transform:translateY(-5px);box-shadow:0 15px 40px #0006}.back-button:active{transform:translateY(-2px)}.zhuyin-title{font-size:6rem;font-weight:900;margin:0;color:#00d4ff;text-shadow:4px 4px 8px rgba(0,0,0,.3);letter-spacing:8px}.zhuyin-display{display:flex;gap:8vw;align-items:center;justify-content:center}.zhuyin-char{font-size:45vmin;font-weight:900;color:#fff;text-shadow:8px 8px 16px rgba(0,0,0,.4),0 0 40px rgba(255,255,255,.3);animation:fadeIn .3s ease-in-out;-webkit-user-select:none;user-select:none}.zhuyin-left{color:#00d4ff}.zhuyin-right{color:#ff9a56}.zhuyin-controls{position:absolute;bottom:6vh;left:50%;transform:translate(-50%);display:flex;gap:3vw;align-items:center}.next-pair-button{padding:3vh 6vw;font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:40px;cursor:pointer;transition:all .3s ease;box-shadow:0 15px 40px #0000004d;letter-spacing:4px}.next-pair-button:hover{transform:translateY(-8px) scale(1.05);box-shadow:0 20px 50px #0006}.next-pair-button:active{transform:translateY(-4px) scale(1.02)}.countdown-toggle-button{padding:3vh 4vw;font-size:2rem;font-weight:700;background:linear-gradient(135deg,#e0e0e0,#a0a0a0);color:#333;border:none;border-radius:40px;cursor:pointer;transition:all .3s ease;box-shadow:0 15px 40px #0000004d;letter-spacing:2px}.countdown-toggle-button.active{background:linear-gradient(135deg,#ff9a56,#ff6a4d);color:#fff}.countdown-toggle-button:hover{transform:translateY(-8px) scale(1.05);box-shadow:0 20px 50px #0006}.countdown-toggle-button:active{transform:translateY(-4px) scale(1.02)}@media(max-width:1400px){.zhuyin-title{font-size:5rem}.back-button{font-size:2.5rem;padding:1.5vh 2.5vw}.zhuyin-char{font-size:40vmin}.countdown-number{font-size:45vmin}.next-pair-button{font-size:3.5rem;padding:2.5vh 5vw}.countdown-toggle-button{font-size:2.5rem;padding:2.5vh 3.5vw}}@media(max-width:768px){.zhuyin-title{font-size:3.5rem;letter-spacing:4px}.back-button{font-size:2rem;padding:1vh 2vw}.zhuyin-display{gap:6vw}.zhuyin-char{font-size:35vmin}.countdown-number{font-size:40vmin}.zhuyin-controls{flex-direction:column;gap:2vh}.next-pair-button{font-size:2.5rem;padding:2vh 4vw;letter-spacing:2px}.countdown-toggle-button{font-size:2rem;padding:2vh 3vw}}@media(max-height:600px){.zhuyin-title{font-size:3rem}.zhuyin-char{font-size:28vmin}.countdown-number{font-size:32vmin}.next-pair-button{font-size:2rem;padding:1.5vh 3vw}.countdown-toggle-button{font-size:1.8rem;padding:1.5vh 2.5vw}}.keyword-game{height:100vh;width:100vw;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;position:relative}.keyword-header{position:absolute;top:3vh;left:0;right:0;width:100%;display:flex;align-items:center;justify-content:center}.keyword-display{display:flex;align-items:center;justify-content:center;gap:8vw;width:100%}.rule-box{width:280px;min-height:120px;display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem;font-size:5rem;font-weight:800;border-radius:30px;animation:fadeIn .3s ease-in-out;-webkit-user-select:none;user-select:none;flex-shrink:0;text-align:center;box-shadow:0 10px 30px #0000004d}.position-rule{background:linear-gradient(135deg,#00d4ff,#0090d9);color:#fff}.length-rule{background:linear-gradient(135deg,#ff9a56,#ff6a4d);color:#fff}.keyword-char{font-size:50vmin;font-weight:900;color:#ff6b6b;text-shadow:8px 8px 16px rgba(0,0,0,.4),0 0 40px rgba(255,107,107,.4);animation:fadeIn .3s ease-in-out;-webkit-user-select:none;user-select:none;flex-shrink:0;min-width:50vmin;text-align:center}.countdown-number{font-size:50vmin;font-weight:900;color:gold;text-shadow:10px 10px 20px rgba(0,0,0,.5),0 0 60px rgba(255,215,0,.6);animation:countdownPulse 1s ease-in-out;-webkit-user-select:none;user-select:none}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes countdownPulse{0%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.keyword-controls{position:absolute;bottom:6vh;left:50%;transform:translate(-50%);display:flex;gap:3vw;align-items:center}.next-char-button{padding:3vh 6vw;font-size:4rem;font-weight:800;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:40px;cursor:pointer;transition:all .3s ease;box-shadow:0 15px 40px #0000004d;letter-spacing:4px}.next-char-button:hover{transform:translateY(-8px) scale(1.05);box-shadow:0 20px 50px #0006}.next-char-button:active{transform:translateY(-4px) scale(1.02)}@media(max-width:1400px){.rule-box{width:240px;min-height:100px;font-size:4rem;padding:1.5rem 1rem}.keyword-char{font-size:45vmin;min-width:45vmin}.countdown-number{font-size:45vmin}.next-char-button{font-size:3.5rem;padding:2.5vh 5vw}}@media(max-width:768px){.keyword-display{gap:4vw}.rule-box{width:180px;min-height:80px;font-size:2.5rem;padding:1rem .75rem;border-radius:20px}.keyword-char{font-size:40vmin;min-width:40vmin}.countdown-number{font-size:40vmin}.keyword-controls{flex-direction:column;gap:2vh}.next-char-button{font-size:2.5rem;padding:2vh 4vw;letter-spacing:2px}}@media(max-height:600px){.keyword-game{gap:3vh}.rule-box{width:150px;min-height:60px;font-size:2rem;padding:.75rem .5rem;border-radius:15px}.keyword-char{font-size:32vmin;min-width:32vmin}.countdown-number{font-size:32vmin}.next-char-button{font-size:2rem;padding:1.5vh 3vw}}