*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--primary-cyan: #00BFFF;--secondary-cyan: #87CEEB;--accent-cyan: #5DADE2;--light-blue: #E3F2FD;--white: #FFFFFF;--light-gray: #F8F9FA;--dark-gray: #2C3E50;--success: #28A745;--warning: #FFC107;--danger: #DC3545;--shadow: rgba(0, 191, 255, .15)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Arial,Helvetica,sans-serif;background:linear-gradient(135deg,var(--light-blue) 0%,var(--white) 50%,var(--secondary-cyan) 100%);min-height:100vh;line-height:1.6}.App{text-align:center;min-height:100vh;padding:20px;color:var(--dark-gray)}.App-header{margin-bottom:40px;position:relative}.header-top{position:absolute;top:0;right:0;z-index:10}.App-header h1{font-size:3rem;margin-bottom:10px;color:var(--primary-cyan);text-shadow:2px 2px 4px var(--shadow);font-weight:700;margin-top:60px}.App-header p{font-size:1.2rem;color:var(--dark-gray);opacity:.8;font-weight:300}.menu-container{max-width:700px;margin:0 auto;background:var(--white);padding:40px;border-radius:20px;box-shadow:0 10px 30px var(--shadow);border:2px solid var(--secondary-cyan)}.menu-container h2{font-size:2rem;margin-bottom:30px;color:var(--primary-cyan);font-weight:600}.mode-section{margin-bottom:40px;padding:30px;background:var(--light-blue);border-radius:15px;border:1px solid var(--secondary-cyan)}.mode-section h3{font-size:1.5rem;margin-bottom:10px;color:var(--accent-cyan);font-weight:600}.mode-description{color:var(--dark-gray);margin-bottom:20px;opacity:.8}.level-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px;margin-top:20px}.level-btn{background:linear-gradient(135deg,var(--white) 0%,var(--light-blue) 100%);border:2px solid var(--primary-cyan);border-radius:12px;padding:20px 15px;cursor:pointer;transition:all .3s ease;color:var(--dark-gray);font-weight:600;min-height:100px;display:flex;flex-direction:column;justify-content:center;align-items:center}.level-btn:hover{background:linear-gradient(135deg,var(--primary-cyan) 0%,var(--accent-cyan) 100%);color:var(--white);transform:translateY(-3px);box-shadow:0 8px 20px var(--shadow)}.level-btn:active{transform:translateY(-1px)}.level-desc{font-size:.9rem;opacity:.8;margin-top:5px;font-weight:400}.level-1,.conversation-1,.chat-1{border-color:var(--secondary-cyan)}.level-2,.conversation-2,.chat-2{border-color:var(--primary-cyan)}.level-3,.conversation-3,.chat-3{border-color:var(--accent-cyan)}.level-4,.conversation-4,.chat-4{border-color:#4682b4}.chat-1,.chat-2,.chat-3,.chat-4{background:linear-gradient(135deg,var(--white) 0%,rgba(0,191,255,.05) 100%);position:relative;overflow:hidden}.chat-1:before,.chat-2:before,.chat-3:before,.chat-4:before{content:"💬";position:absolute;top:8px;right:8px;font-size:1.2rem;opacity:.7}.chat-1:hover,.chat-2:hover,.chat-3:hover,.chat-4:hover{background:linear-gradient(135deg,var(--primary-cyan) 0%,var(--accent-cyan) 100%);border-color:var(--primary-cyan);box-shadow:0 8px 25px #00bfff4d}.options{margin-top:30px;padding:20px;background:var(--white);border-radius:10px;border:1px solid var(--secondary-cyan)}.translation-toggle{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1rem;color:var(--dark-gray);cursor:pointer}.translation-toggle input[type=checkbox]{width:20px;height:20px;accent-color:var(--primary-cyan)}.time-setting{margin-top:15px;text-align:center}.time-label{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1rem;color:var(--dark-gray);font-weight:600}.time-select{padding:8px 12px;border:2px solid var(--secondary-cyan);border-radius:8px;background:var(--white);color:var(--dark-gray);font-size:1rem;cursor:pointer;transition:all .3s ease;min-width:140px}.time-select:focus{outline:none;border-color:var(--primary-cyan);box-shadow:0 0 0 3px #00bfff1a}.time-select:hover{border-color:var(--primary-cyan)}.game-container{max-width:800px;margin:0 auto;background:var(--white);padding:40px;border-radius:20px;box-shadow:0 10px 30px var(--shadow);border:2px solid var(--secondary-cyan)}.game-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin-bottom:40px}.info-item{background:var(--light-blue);padding:15px;border-radius:10px;border:1px solid var(--secondary-cyan)}.info-label{display:block;font-size:.9rem;color:var(--dark-gray);opacity:.8;margin-bottom:5px}.info-value{font-size:1.4rem;font-weight:700;color:var(--primary-cyan)}.timer{color:var(--warning)}.word-display{margin:40px 0;padding:40px;background:linear-gradient(135deg,var(--light-blue) 0%,var(--white) 100%);border-radius:15px;border:2px solid var(--secondary-cyan)}.current-word{font-size:3rem;font-weight:700;color:var(--primary-cyan);margin-bottom:15px;text-shadow:1px 1px 2px var(--shadow)}.translation{font-size:1.3rem;color:var(--dark-gray);opacity:.8}.input-section{display:flex;gap:15px;justify-content:center;align-items:center;margin:30px 0}.word-input{flex:1;max-width:400px;padding:15px 20px;font-size:1.2rem;border:2px solid var(--secondary-cyan);border-radius:10px;background:var(--white);color:var(--dark-gray);transition:all .3s ease}.submit-btn{padding:15px 30px;font-size:1.1rem;font-weight:600;background:linear-gradient(135deg,var(--primary-cyan) 0%,var(--accent-cyan) 100%);color:var(--white);border:none;border-radius:10px;cursor:pointer;transition:all .3s ease}.submit-btn:hover{background:linear-gradient(135deg,var(--accent-cyan) 0%,var(--primary-cyan) 100%);transform:translateY(-2px);box-shadow:0 5px 15px var(--shadow)}.progress-bar{width:100%;height:8px;background:var(--light-blue);border-radius:4px;overflow:hidden;border:1px solid var(--secondary-cyan)}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary-cyan) 0%,var(--accent-cyan) 100%);transition:width .3s ease}.result-container{max-width:600px;margin:0 auto;background:var(--white);padding:40px;border-radius:20px;box-shadow:0 10px 30px var(--shadow);border:2px solid var(--secondary-cyan)}.result-container h2{font-size:2.5rem;margin-bottom:20px;color:var(--primary-cyan);font-weight:700}.completed-level{font-size:1.2rem;color:var(--dark-gray);margin-bottom:30px;opacity:.8}.result-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:20px;margin:30px 0}.stat-item{background:var(--light-blue);padding:20px;border-radius:12px;border:1px solid var(--secondary-cyan);text-align:center}.stat-number{display:block;font-size:2rem;font-weight:700;color:var(--primary-cyan);margin-bottom:5px}.stat-label{font-size:.9rem;color:var(--dark-gray);opacity:.8}.restart-btn{margin-top:30px;padding:15px 40px;font-size:1.2rem;font-weight:600;background:linear-gradient(135deg,var(--primary-cyan) 0%,var(--accent-cyan) 100%);color:var(--white);border:none;border-radius:12px;cursor:pointer;transition:all .3s ease}.restart-btn:hover{background:linear-gradient(135deg,var(--accent-cyan) 0%,var(--primary-cyan) 100%);transform:translateY(-2px);box-shadow:0 8px 20px var(--shadow)}.chat-history-section{margin-top:30px;width:100%}.result-tabs{display:flex;border-bottom:2px solid var(--light-blue);margin-bottom:20px;gap:0}.tab-btn{flex:1;padding:12px 20px;background:var(--light-blue);border:none;border-bottom:3px solid transparent;cursor:pointer;font-weight:600;color:var(--dark-gray);transition:all .3s ease;font-size:1rem}.tab-btn:first-child{border-top-left-radius:8px}.tab-btn:last-child{border-top-right-radius:8px}.tab-btn:hover{background:var(--secondary-cyan);color:var(--white)}.tab-btn.active{background:var(--primary-cyan);color:var(--white);border-bottom-color:var(--accent-cyan)}.chat-history-display{background:var(--white);border:2px solid var(--light-blue);border-radius:12px;padding:20px;max-height:400px;overflow-y:auto}.chat-history-display h3{color:var(--primary-cyan);margin-bottom:15px;font-size:1.3rem;text-align:center}.chat-history-messages{display:flex;flex-direction:column;gap:8px}.history-message{display:flex;width:100%}.history-message.japanese{justify-content:flex-start}.history-message.english{justify-content:flex-end}.history-message-bubble{max-width:70%;padding:12px 16px;border-radius:16px;font-size:.9rem}.history-message.japanese .history-message-bubble{background:linear-gradient(135deg,var(--primary-cyan) 0%,var(--accent-cyan) 100%);color:var(--white);border-bottom-left-radius:4px}.history-message.english .history-message-bubble{background:var(--light-blue);color:var(--dark-gray);border:1px solid var(--secondary-cyan);border-bottom-right-radius:4px}.history-message-text{font-weight:500;line-height:1.4;margin-bottom:4px}.history-correction{font-size:.8rem;color:#666;font-weight:400;margin-top:6px;padding-top:6px;border-top:1px solid rgba(102,102,102,.3);opacity:.8}.history-message-time{font-size:.7rem;opacity:.7;text-align:right;margin-top:4px}.chat-history-display::-webkit-scrollbar{width:6px}.chat-history-display::-webkit-scrollbar-track{background:var(--light-blue);border-radius:3px}.chat-history-display::-webkit-scrollbar-thumb{background:var(--secondary-cyan);border-radius:3px}.chat-history-display::-webkit-scrollbar-thumb:hover{background:var(--accent-cyan)}@media (max-width: 768px){.App{padding:15px}.App-header h1{font-size:2.5rem;margin-top:80px}.menu-container,.game-container,.result-container{padding:25px;margin:20px 10px}.level-buttons{grid-template-columns:1fr}.current-word{font-size:2.2rem}.input-section{flex-direction:column;gap:15px}.word-input{max-width:100%}.result-stats{grid-template-columns:repeat(2,1fr)}}.sound-control{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--white);padding:15px;border-radius:12px;border:2px solid var(--secondary-cyan);box-shadow:0 4px 12px var(--shadow);min-width:120px}.sound-toggle{background:linear-gradient(135deg,var(--primary-cyan) 0%,var(--accent-cyan) 100%);border:none;border-radius:8px;color:var(--white);font-size:1.1rem;padding:8px 16px;cursor:pointer;transition:all .3s ease;font-weight:600}.sound-toggle:hover{background:linear-gradient(135deg,var(--accent-cyan) 0%,var(--primary-cyan) 100%);transform:translateY(-1px);box-shadow:0 3px 8px var(--shadow)}.sound-toggle.disabled{background:var(--light-gray);color:var(--dark-gray)}.volume-control{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%}.volume-label{font-size:.8rem;color:var(--dark-gray);opacity:.8;font-weight:500}.volume-slider{width:80px;height:4px;background:var(--light-blue);border-radius:2px;outline:none;cursor:pointer;accent-color:var(--primary-cyan)}.bgm-controls{display:flex;flex-direction:column;gap:8px;align-items:center;padding-top:10px;border-top:1px solid var(--secondary-cyan);width:100%}.bgm-toggle{background:linear-gradient(135deg,var(--secondary-cyan) 0%,var(--accent-cyan) 100%);border:none;border-radius:6px;color:var(--white);font-size:.9rem;padding:6px 12px;cursor:pointer;transition:all .3s ease;font-weight:500}.bgm-toggle:hover{background:linear-gradient(135deg,var(--accent-cyan) 0%,var(--secondary-cyan) 100%);transform:translateY(-1px)}.bgm-toggle.disabled{background:var(--light-gray);color:var(--dark-gray)}.volume-display{font-size:.8rem;color:var(--primary-cyan);font-weight:600;min-width:30px;text-align:right}@media (max-width: 480px){.header-top{position:relative;top:auto;right:auto;margin-bottom:20px}.App-header h1{margin-top:20px;font-size:2rem}.sound-control{padding:10px;min-width:100px}.current-word{font-size:1.8rem}.translation{font-size:1.1rem}}button:focus,input:focus{outline:2px solid var(--primary-cyan);outline-offset:2px}button:disabled{opacity:.6;cursor:not-allowed}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.menu-container,.game-container,.result-container{animation:fadeIn .5s ease-out}button{font-family:inherit;transition:all .3s ease}input{font-family:inherit}.custom-word-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-top:20px}.custom-manage-btn,.custom-play-btn{background:linear-gradient(135deg,var(--secondary-cyan) 0%,var(--accent-cyan) 100%);border:2px solid var(--accent-cyan)}.custom-manage-btn:hover,.custom-play-btn:hover:not(:disabled){background:linear-gradient(135deg,var(--accent-cyan) 0%,var(--primary-cyan) 100%);border-color:var(--primary-cyan)}.custom-play-btn:disabled{background:var(--light-gray);color:var(--dark-gray);border-color:var(--light-gray);opacity:.6;cursor:not-allowed}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.custom-words-modal{background:var(--white);border-radius:20px;border:2px solid var(--secondary-cyan);width:90%;max-width:900px;max-height:90vh;overflow:hidden;animation:slideUp .3s ease;box-shadow:0 15px 35px var(--shadow)}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;border-bottom:2px solid var(--light-blue);background:var(--light-blue)}.modal-header h2{color:var(--primary-cyan);font-size:1.8rem;font-weight:600;margin:0}.close-btn{background:var(--white);border:2px solid var(--secondary-cyan);color:var(--primary-cyan);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.4rem;font-weight:700;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.close-btn:hover{background:var(--danger);color:var(--white);border-color:var(--danger);transform:scale(1.1)}.modal-content{padding:30px;max-height:70vh;overflow-y:auto;color:var(--dark-gray)}.message{padding:12px 20px;border-radius:8px;margin-bottom:20px;font-weight:500;animation:fadeIn .3s ease}.message.success{background:#28a7451a;color:var(--success);border:1px solid var(--success)}.message.error{background:#dc35451a;color:var(--danger);border:1px solid var(--danger)}.add-word-section{background:var(--light-blue);padding:25px;border-radius:15px;margin-bottom:30px;border:1px solid var(--secondary-cyan)}.add-word-section h3{color:var(--primary-cyan);margin-bottom:20px;font-size:1.3rem;font-weight:600}.add-word-form{width:100%}.input-group{display:grid;grid-template-columns:1fr 1fr auto;gap:15px;align-items:center}.word-input{padding:12px 16px;border:2px solid var(--secondary-cyan);border-radius:8px;background:var(--white);color:var(--dark-gray);font-size:1rem;transition:all .3s ease}.word-input:focus{outline:none;border-color:var(--primary-cyan);box-shadow:0 0 0 3px #00bfff1a}.add-btn{padding:12px 24px;background:linear-gradient(135deg,var(--primary-cyan) 0%,var(--accent-cyan) 100%);color:var(--white);border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap}.add-btn:hover{background:linear-gradient(135deg,var(--accent-cyan) 0%,var(--primary-cyan) 100%);transform:translateY(-1px);box-shadow:0 4px 12px var(--shadow)}.words-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;gap:20px;flex-wrap:wrap}.search-section{flex:1;min-width:200px}.search-input{width:100%;padding:12px 16px;border:2px solid var(--secondary-cyan);border-radius:8px;background:var(--white);color:var(--dark-gray);font-size:1rem;transition:all .3s ease}.search-input:focus{outline:none;border-color:var(--primary-cyan);box-shadow:0 0 0 3px #00bfff1a}.action-buttons{display:flex;gap:15px;flex-wrap:wrap}.start-game-btn,.export-btn{padding:12px 20px;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap}.start-game-btn{background:linear-gradient(135deg,var(--success) 0%,#20A745 100%);color:var(--white)}.start-game-btn:hover:not(:disabled){background:linear-gradient(135deg,#20A745 0%,var(--success) 100%);transform:translateY(-1px);box-shadow:0 4px 12px #28a7454d}.start-game-btn:disabled{background:var(--light-gray);color:var(--dark-gray);opacity:.6;cursor:not-allowed}.export-btn{background:linear-gradient(135deg,var(--secondary-cyan) 0%,var(--accent-cyan) 100%);color:var(--white)}.export-btn:hover:not(:disabled){background:linear-gradient(135deg,var(--accent-cyan) 0%,var(--secondary-cyan) 100%);transform:translateY(-1px);box-shadow:0 4px 12px var(--shadow)}.export-btn:disabled{background:var(--light-gray);color:var(--dark-gray);opacity:.6;cursor:not-allowed}.words-list h3{color:var(--primary-cyan);margin-bottom:20px;font-size:1.3rem;font-weight:600}.no-words{text-align:center;color:var(--dark-gray);opacity:.7;padding:40px 20px;background:var(--light-blue);border-radius:10px;border:1px solid var(--secondary-cyan)}.words-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:15px}.word-item{background:var(--white);border:2px solid var(--secondary-cyan);border-radius:12px;padding:20px;transition:all .3s ease;display:flex;justify-content:space-between;align-items:center}.word-item:hover{border-color:var(--primary-cyan);box-shadow:0 4px 15px var(--shadow);transform:translateY(-2px)}.word-content{flex:1}.word-english{font-size:1.2rem;font-weight:600;color:var(--primary-cyan);margin-bottom:5px}.word-japanese{font-size:1rem;color:var(--dark-gray);opacity:.8}.word-actions{display:flex;gap:8px;margin-left:15px}.edit-btn,.delete-btn{width:32px;height:32px;border:none;border-radius:6px;cursor:pointer;font-size:1rem;font-weight:700;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.edit-btn{background:var(--warning);color:var(--white)}.edit-btn:hover{background:#e0a800;transform:scale(1.1)}.delete-btn{background:var(--danger);color:var(--white)}.delete-btn:hover{background:#c82333;transform:scale(1.1)}.edit-form{width:100%;display:flex;flex-direction:column;gap:10px}.edit-input{padding:8px 12px;border:2px solid var(--secondary-cyan);border-radius:6px;background:var(--white);color:var(--dark-gray);font-size:.9rem;transition:all .3s ease}.edit-input:focus{outline:none;border-color:var(--primary-cyan);box-shadow:0 0 0 2px #00bfff1a}.edit-buttons{display:flex;gap:8px;justify-content:flex-end}.save-btn,.cancel-btn{padding:6px 12px;border:none;border-radius:4px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease}.save-btn{background:var(--success);color:var(--white)}.save-btn:hover{background:#20a745}.cancel-btn{background:var(--light-gray);color:var(--dark-gray)}.cancel-btn:hover{background:#e9ecef}.quit-btn{padding:10px 20px;background:var(--white);color:var(--danger);border:2px solid var(--danger);border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.9rem;position:relative;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #dc35451a}.quit-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(220,53,69,.1),transparent);transition:left .5s ease}.quit-btn:hover:before{left:100%}.quit-btn:hover{background:var(--danger);color:var(--white);transform:translateY(-2px);box-shadow:0 6px 20px #dc35454d;border-color:var(--danger)}.quit-btn:active{transform:translateY(0);box-shadow:0 2px 8px #dc354533}.keyboard-hint{font-size:.75rem;color:var(--secondary-text);opacity:.7;margin-top:4px;text-align:center;font-style:italic}.preset-words-modal{background:var(--white);border-radius:20px;border:2px solid var(--secondary-cyan);width:95%;max-width:1200px;max-height:90vh;overflow:hidden;animation:slideUp .3s ease;box-shadow:0 15px 35px var(--shadow)}.stats-overview{background:var(--light-blue);padding:20px;border-radius:10px;margin-bottom:20px;border:1px solid var(--secondary-cyan)}.stats-overview h3{color:var(--primary-cyan);margin-bottom:15px;font-size:1.3rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:15px}.stat-box{background:var(--white);padding:15px;border-radius:8px;border:1px solid var(--secondary-cyan)}.stat-box strong{color:var(--primary-cyan);display:block;margin-bottom:8px}.filters-section{display:flex;gap:20px;align-items:end;margin-bottom:20px;flex-wrap:wrap;padding:20px;background:var(--light-blue);border-radius:10px;border:1px solid var(--secondary-cyan)}.filter-group{display:flex;flex-direction:column;gap:5px}.filter-group label{font-weight:600;color:var(--dark-gray);font-size:.9rem}.filter-select{padding:8px 12px;border:2px solid var(--secondary-cyan);border-radius:6px;background:var(--white);color:var(--dark-gray);font-size:.9rem;min-width:120px}.filter-select:focus{outline:none;border-color:var(--primary-cyan);box-shadow:0 0 0 2px #00bfff1a}.data-table{border:2px solid var(--secondary-cyan);border-radius:10px;overflow:hidden;background:var(--white);max-height:400px;overflow-y:auto}.table-header{display:grid;grid-template-columns:2fr 2fr 80px;background:var(--primary-cyan);color:var(--white);font-weight:600;padding:12px;position:sticky;top:0;z-index:10}.table-body{max-height:360px;overflow-y:auto}.table-row{display:grid;grid-template-columns:2fr 2fr 80px;padding:10px 12px;border-bottom:1px solid var(--light-blue);transition:background-color .2s ease}.table-row:last-child{border-bottom:none}.col-english{font-weight:600;color:var(--primary-cyan)}.col-japanese{color:var(--dark-gray)}.col-level{text-align:center;font-weight:600;color:var(--accent-cyan)}.no-data{text-align:center;color:var(--dark-gray);opacity:.7;padding:40px 20px;background:var(--light-blue);border-radius:10px;border:1px solid var(--secondary-cyan)}.chat-typing-game{max-width:1000px;margin:0 auto;height:80vh;display:flex;flex-direction:column;background:var(--white);border-radius:20px;box-shadow:0 10px 30px var(--shadow);border:2px solid var(--secondary-cyan);overflow:hidden}.game-info-header{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;padding:20px;background:var(--light-blue);border-bottom:2px solid var(--secondary-cyan);min-height:auto}.game-info-header .info-item{background:var(--white);padding:12px;border-radius:8px;border:1px solid var(--secondary-cyan);text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}.game-info-header .info-label{font-size:.8rem;color:var(--dark-gray);opacity:.8}.game-info-header .info-value{font-size:1.1rem;font-weight:700;color:var(--primary-cyan)}.chat-container{flex:1;overflow-y:auto;padding:20px;background:linear-gradient(180deg,var(--white) 0%,var(--light-blue) 100%);scroll-behavior:smooth}.chat-messages{display:flex;flex-direction:column;gap:8px;min-height:100%}.message{display:flex;animation:messageSlideIn .3s ease-out}.message.japanese{justify-content:flex-start}.message.english{justify-content:flex-end}.message-bubble{max-width:70%;padding:15px 20px;border-radius:20px;position:relative;box-shadow:0 2px 8px #0000001a}.message.japanese .message-bubble{background:linear-gradient(135deg,var(--primary-cyan) 0%,var(--accent-cyan) 100%);color:var(--white);border-bottom-left-radius:5px;margin-right:auto}.message.english .message-bubble{background:var(--white);color:var(--dark-gray);border:2px solid var(--secondary-cyan);border-bottom-right-radius:5px;margin-left:auto}.message.english .message-bubble.typing{background:var(--light-blue);border-color:var(--accent-cyan)}.message-text{font-size:1.1rem;line-height:1.4;margin-bottom:5px;font-weight:500}.correction{font-size:.9rem;color:#666;font-weight:500;margin-top:8px;padding-top:8px;border-top:1px solid rgba(102,102,102,.3);opacity:.8}.message-time{font-size:.7rem;opacity:.7;text-align:right;margin-top:5px}.typing-indicator{display:flex;gap:4px;align-items:center;justify-content:center;padding:5px 0}.typing-indicator span{width:8px;height:8px;border-radius:50%;background:var(--accent-cyan);animation:typingBounce 1.4s infinite ease-in-out}.typing-indicator span:nth-child(1){animation-delay:-.32s}.typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes typingBounce{0%,80%,to{transform:scale(0);opacity:.5}40%{transform:scale(1);opacity:1}}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.chat-input-area{padding:20px;background:var(--white);border-top:2px solid var(--secondary-cyan)}.input-container{display:flex;gap:12px;align-items:center;margin-bottom:10px}.chat-input{flex:1;padding:12px 18px;font-size:1rem;border:2px solid var(--secondary-cyan);border-radius:25px;background:var(--light-blue);color:var(--dark-gray);transition:all .3s ease;outline:none}.chat-input:focus{border-color:var(--primary-cyan);box-shadow:0 0 0 3px #00bfff1a;background:var(--white)}.chat-input:disabled{opacity:.6;cursor:not-allowed}.send-btn{padding:12px 20px;background:linear-gradient(135deg,var(--primary-cyan) 0%,var(--accent-cyan) 100%);color:var(--white);border:none;border-radius:25px;cursor:pointer;font-weight:600;transition:all .3s ease;white-space:nowrap}.send-btn:hover:not(:disabled){background:linear-gradient(135deg,var(--accent-cyan) 0%,var(--primary-cyan) 100%);transform:translateY(-1px);box-shadow:0 4px 12px var(--shadow)}.send-btn:disabled{background:var(--light-gray);color:var(--dark-gray);opacity:.6;cursor:not-allowed;transform:none}.current-translation{text-align:center;font-size:.9rem;color:var(--accent-cyan);font-weight:500;opacity:.8;padding:8px;background:#5dade21a;border-radius:15px;border:1px solid rgba(93,173,226,.3)}.message.english .message-bubble.correct{border-color:var(--success);background:#28a7451a}.message.english .message-bubble.incorrect{border-color:var(--danger);background:#dc35451a}.chat-container::-webkit-scrollbar{width:8px}.chat-container::-webkit-scrollbar-track{background:var(--light-blue);border-radius:4px}.chat-container::-webkit-scrollbar-thumb{background:var(--secondary-cyan);border-radius:4px}.chat-container::-webkit-scrollbar-thumb:hover{background:var(--accent-cyan)}@media (max-width: 768px){.chat-typing-game{height:85vh;margin:10px}.game-info-header{grid-template-columns:repeat(2,1fr);gap:10px;padding:15px}.message-bubble{max-width:85%;padding:12px 16px;font-size:.95rem}.chat-container{padding:15px}.chat-messages{gap:6px}.chat-input-area{padding:15px}.input-container{flex-direction:column;gap:10px}.send-btn{width:100%;justify-self:stretch}.current-translation{font-size:.8rem}}@media (max-width: 480px){.chat-typing-game{height:90vh;margin:5px}.game-info-header{grid-template-columns:1fr 1fr;padding:10px}.game-info-header .info-item{padding:8px}.message-bubble{max-width:90%;padding:10px 14px;font-size:.9rem}.message-text{font-size:1rem}.chat-messages{gap:5px}.chat-input{font-size:16px}}@media (max-width: 768px){.custom-words-modal,.preset-words-modal{width:95%;margin:20px}.modal-content{padding:20px}.input-group{grid-template-columns:1fr;gap:10px}.words-controls{flex-direction:column;align-items:stretch}.action-buttons{justify-content:center}.words-grid{grid-template-columns:1fr}.word-item{flex-direction:column;align-items:stretch;gap:15px}.word-actions{justify-content:center;margin-left:0}.custom-word-controls{grid-template-columns:1fr}.filters-section{flex-direction:column;align-items:stretch;gap:15px}.filter-group{width:100%}.filter-select{min-width:auto;width:100%}.data-table{font-size:.8rem}.table-header,.table-row{grid-template-columns:1.5fr 1.5fr 60px;padding:8px}.stats-grid{grid-template-columns:1fr}}.csv-info-section{background:var(--light-blue);border:2px solid var(--secondary-cyan);border-radius:10px;padding:20px;margin-bottom:25px}.csv-info-section h3{color:var(--primary-cyan);margin-bottom:15px;font-size:1.2rem}.csv-format-info{margin-bottom:15px;color:var(--dark-gray);font-size:.95rem}.csv-example{background:var(--white);border:1px solid var(--secondary-cyan);border-radius:8px;padding:15px;text-align:left}.csv-example code{display:block;font-family:Courier New,monospace;font-size:.9rem;line-height:1.4;color:var(--dark-gray);background:transparent}.csv-buttons{display:flex;gap:10px;align-items:center}.import-btn{background:var(--accent-cyan);color:var(--white);border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600;transition:all .3s ease;display:inline-block;text-decoration:none}.import-btn:hover{background:var(--primary-cyan);transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow)}.import-btn:active{transform:translateY(0)}.message.warning{background:#fff3cd;color:#856404;border:1px solid #ffeaa7}.history-modal{background:var(--white);border-radius:20px;width:90%;max-width:1000px;max-height:90vh;overflow:hidden;box-shadow:0 20px 40px var(--shadow);animation:slideUp .3s ease}.stats-section{background:var(--light-blue);border-radius:15px;padding:20px;margin-bottom:25px}.stats-section h3{color:var(--primary-cyan);margin-bottom:15px;font-size:1.3rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px}.stat-item{background:var(--white);border-radius:10px;padding:15px;text-align:center;border:2px solid var(--secondary-cyan)}.stat-number{display:block;font-size:1.8rem;font-weight:700;color:var(--primary-cyan);margin-bottom:5px}.stat-label{font-size:.9rem;color:var(--dark-gray)}.filter-section{display:flex;gap:20px;align-items:center;margin-bottom:25px;padding:15px;background:var(--light-gray);border-radius:10px;flex-wrap:wrap}.filter-group{display:flex;align-items:center;gap:8px}.filter-group label{font-weight:600;color:var(--dark-gray)}.filter-group select{padding:8px 12px;border:2px solid var(--secondary-cyan);border-radius:8px;background:var(--white);color:var(--dark-gray);font-size:.9rem}.clear-history-btn{background:var(--danger);color:var(--white);border:none;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600;transition:all .3s ease;margin-left:auto}.clear-history-btn:hover:not(:disabled){background:#c82333;transform:translateY(-2px)}.clear-history-btn:disabled{background:#ccc;cursor:not-allowed}.history-list h3{color:var(--primary-cyan);margin-bottom:15px;font-size:1.2rem}.no-history{text-align:center;padding:40px;color:var(--dark-gray);font-size:1.1rem}.history-table{border:2px solid var(--secondary-cyan);border-radius:10px;overflow:hidden}.table-header{display:grid;grid-template-columns:140px 120px 80px 80px 80px 80px 60px;background:var(--primary-cyan);color:var(--white);font-weight:700;padding:15px 10px;font-size:.9rem}.table-row{display:grid;grid-template-columns:140px 120px 80px 80px 80px 80px 60px;padding:12px 10px;border-bottom:1px solid var(--secondary-cyan);font-size:.85rem;align-items:center}.table-row:nth-child(2n){background:var(--light-gray)}.table-row:hover{background:var(--light-blue)}.date-cell{font-size:.8rem;color:var(--dark-gray)}.mode-cell{font-weight:600;color:var(--primary-cyan)}.score-cell,.accuracy-cell,.wpm-cell{text-align:center;font-weight:600}.result-cell{text-align:center;padding:4px 8px;border-radius:6px;font-size:.8rem;font-weight:600}.result-cell.completed{background:var(--success);color:var(--white)}.result-cell.timeout{background:var(--warning);color:var(--white)}.result-cell.quit{background:var(--danger);color:var(--white)}.delete-record-btn{background:var(--danger);color:var(--white);border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;font-size:.8rem;font-weight:700;transition:all .2s ease}.delete-record-btn:hover{background:#c82333;transform:scale(1.1)}.history-btn{background:var(--accent-cyan);color:var(--white);border:none;padding:12px 20px;border-radius:10px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s ease;display:flex;align-items:center;gap:8px}.history-btn:hover{background:var(--primary-cyan);transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow)}.menu-actions{margin-top:15px;display:flex;justify-content:center}@media (max-width: 768px){.history-modal{width:95%;max-height:95vh}.stats-grid{grid-template-columns:repeat(2,1fr)}.filter-section{flex-direction:column;align-items:stretch}.table-header,.table-row{grid-template-columns:100px 80px 60px 60px 60px 60px 40px;font-size:.75rem}.date-cell{font-size:.7rem}}