*{box-sizing:border-box}
body{font-family:-apple-system,system-ui,Segoe UI,Roboto,Arial;line-height:1.6;margin:0;background:#f7f7f7;color:#222}
.page{min-height:100vh;background:#000 url('images/bg.png') center/cover no-repeat;padding-top:0}
.panel{min-height:calc(100vh - 56px);margin:0;padding:24px;width:100%;background:rgba(255,255,255,0.9);border:1px solid #e9e9e9;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,0.12)}
.panel .wrap{background:transparent;border:0}
.navbar{position:sticky;top:0;background:#111;color:#fff;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:56px}
.nav{grid-column:2;display:flex;justify-content:center;gap:16px;padding:12px}
.nav-right{grid-column:3;justify-self:end;display:flex;gap:8px;align-items:center;padding-right:12px}
.nav-mini{background:#f4b400;color:#fff;border:none;border-radius:18px;padding:8px 14px;text-decoration:none}
.nav-mini:hover{filter:brightness(.95)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:1000}
.modal-content{background:#fff;border-radius:12px;padding:24px;max-width:1000px;width:95%}
.group-title{font-size:22px;color:#6b4b2b;text-align:center;margin-bottom:12px}
.group-scroll{max-height:480px;overflow:auto;background:#f7efe4;border-radius:12px;padding:16px;border:1px solid #e5d2ba}
.grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.grid button{padding:10px 14px;border:2px solid #b47d37;border-radius:14px;background:#fff;color:#8a5a2b;font-weight:600;white-space:nowrap;min-width:100px}
.grid button:hover{background:#fff6e5}
.grid button.selected{background:#b47d37;color:#fff}
.login-box{margin-top:16px;background:#fff;border-radius:12px;padding:16px;text-align:center;border:1px solid #e5d2ba}
.login-status{margin-bottom:12px;color:#6b4b2b}
.login-btn{background:#b47d37;color:#fff;border:none;border-radius:12px;padding:10px 24px;font-size:16px}
.login-btn:disabled{opacity:.6;cursor:not-allowed}
.notice{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:#ffecb3;color:#6b4b2b;border:1px solid #f4b400;padding:10px 16px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.12);z-index:999}
.nav-btn{display:inline-block;background:#c62828;color:#fff;text-decoration:none;padding:10px 22px;border-radius:24px;font-size:18px;min-width:100px;text-align:center}
.hero{height:100vh;background:#000 url('images/bg.png') center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.game-panel{max-width:960px;margin:16px auto;background:#fff;border:1px solid #e9e9e9;border-radius:12px;padding:16px;box-shadow:0 2px 12px rgba(0,0,0,.12)}
.game-row{display:flex;gap:8px;margin-top:8px}
.game-row input,.game-row button{font-size:16px;padding:8px}
.code-out{min-height:40px;border:1px dashed #ccc;border-radius:8px;padding:8px}
.wrap{max-width:960px;margin:24px auto;padding:16px;background:#fff;border:1px solid #eee;border-radius:8px}
h1{font-size:22px;margin:0 0 12px}
.row{display:flex;gap:12px;margin:12px 0}
.col{flex:1}
label{display:block;font-size:14px;margin:6px 0}
input,select,button,textarea{font-size:16px;padding:8px;border:1px solid #ccc;border-radius:6px}
button{background:#c62828;color:#fff;border:none;cursor:pointer}
button.secondary{background:#1976d2}
button:disabled{opacity:.6;cursor:not-allowed}
.list{border:1px solid #ddd;border-radius:6px;padding:8px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #ddd;padding:6px;text-align:left}
.badge{display:inline-block;background:#eee;border:1px solid #ddd;border-radius:12px;padding:2px 8px;margin-left:8px}
.hint{font-size:13px;color:#666}
.game-modal-content{background:#fff;border-radius:16px;padding:32px;max-width:1200px;width:95%;max-height:90vh;overflow:auto;position:relative}
.game-close-btn{position:absolute;top:16px;right:20px;background:#f44336;color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:28px;cursor:pointer;line-height:1}
.game-close-btn:hover{background:#d32f2f}
.game-title{text-align:center;font-size:28px;color:#c62828;margin-bottom:24px;font-weight:bold}
.game-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.game-left,.game-right{border:2px solid #e0e0e0;border-radius:12px;padding:20px;background:#fafafa}
.section-title{font-size:20px;font-weight:bold;color:#1976d2;margin-bottom:16px;text-align:center}
.converter-box{background:#fff;border-radius:8px;padding:16px;margin-bottom:16px;border:1px solid #ddd}
.input-group{margin-bottom:12px}
.input-group label{display:block;font-size:14px;color:#555;margin-bottom:6px;font-weight:600}
.game-input{width:100%;padding:10px;border:2px solid #ccc;border-radius:8px;font-size:16px}
.game-input:focus{outline:none;border-color:#1976d2}
.convert-arrows{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.convert-btn{background:#1976d2;color:#fff;border:none;padding:10px;border-radius:8px;cursor:pointer;font-size:14px}
.convert-btn:hover{background:#1565c0}
.result-display{margin-top:16px}
.result-label{font-size:14px;color:#555;margin-bottom:8px;font-weight:600}
.result-box{background:#e3f2fd;border:2px solid #90caf9;border-radius:8px;padding:12px;min-height:50px;font-size:16px;color:#0d47a1;word-break:break-all}
.challenge-grid{display:flex;gap:12px;margin-bottom:20px;justify-content:center;flex-wrap:wrap}
.challenge-btn{background:#ff9800;color:#fff;border:none;padding:12px 24px;border-radius:24px;cursor:pointer;font-size:16px;font-weight:bold;min-width:100px}
.challenge-btn:hover{background:#f57c00}
.challenge-area{background:#fff;border-radius:8px;padding:16px;border:1px solid #ddd}
.challenge-question{font-size:17px;color:#333;margin-bottom:16px;padding:16px;background:#fff3e0;border-radius:8px;text-align:center;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.6}
.word-highlight{color:#c62828;font-weight:bold;font-size:20px;display:inline-block;white-space:nowrap}
.answer-group{display:flex;gap:8px;margin-bottom:16px}
.answer-group .game-input{flex:1}
.submit-btn{background:#4caf50;color:#fff;border:none;padding:10px 24px;border-radius:8px;cursor:pointer;font-size:16px;font-weight:bold;white-space:nowrap}
.submit-btn:hover{background:#45a049}
.status-box{min-height:60px;padding:12px;background:#f5f5f5;border-radius:8px;text-align:center;margin-bottom:16px}
.score-board{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#e8f5e9;border-radius:8px}
.score-board div{font-size:16px;color:#2e7d32;font-weight:bold}
.reset-btn{background:#f44336;color:#fff;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:14px}
.reset-btn:hover{background:#d32f2f}
@media(max-width:900px){.game-layout{grid-template-columns:1fr}}
.encode-practice{max-width:700px;margin:0 auto;padding:20px}
.practice-info{margin-bottom:30px;padding:20px;background:#fff3e0;border-radius:8px}
.encode-table{border:2px solid #c62828;border-radius:12px;overflow:hidden;margin-bottom:24px}
.encode-row{display:grid;grid-template-columns:150px 1fr;border-bottom:1px solid #ddd}
.encode-row:last-child{border-bottom:none}
.encode-header{background:#c62828;color:#fff;font-weight:bold}
.encode-header .encode-cell{padding:16px;font-size:18px}
.encode-cell{padding:16px;display:flex;align-items:center;justify-content:center;border-right:1px solid #ddd}
.encode-cell:last-child{border-right:none}
.char-cell{font-size:32px;font-weight:bold;color:#c62828;background:#fff3e0}
.cipher-input{width:100%;padding:12px;font-size:18px;border:2px solid #e0e0e0;border-radius:8px;text-align:center}
.cipher-input:focus{outline:none;border-color:#1976d2}
.submit-area{text-align:center}
.submit-button{background:#4caf50;color:#fff;border:none;padding:14px 40px;border-radius:8px;font-size:18px;font-weight:bold;cursor:pointer}
.submit-button:hover{background:#45a049}
.submit-status{margin-top:16px;min-height:30px;font-size:16px}
.role-select-area{max-width:1000px;margin:0 auto;padding:20px}
.role-title{text-align:center;font-size:24px;color:#333;margin-bottom:30px;font-weight:bold}
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.role-card{background:#fff;border:3px solid #e0e0e0;border-radius:16px;padding:32px 20px;cursor:pointer;transition:all .3s;text-align:center}
.role-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,.15)}
.role-card.sender{border-color:#1976d2}
.role-card.sender:hover{border-color:#1565c0;background:#e3f2fd}
.role-card.ally{border-color:#4caf50}
.role-card.ally:hover{border-color:#45a049;background:#e8f5e9}
.role-card.enemy{border-color:#f44336}
.role-card.enemy:hover{border-color:#d32f2f;background:#ffebee}
.role-icon{font-size:48px;margin-bottom:12px}
.role-name{font-size:20px;font-weight:bold;color:#333;margin-bottom:8px}
.role-desc{font-size:14px;color:#666}
.transmit-area{max-width:900px;margin:0 auto;padding:20px}
.area-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.role-badge{padding:10px 20px;border-radius:20px;font-size:16px;font-weight:bold;color:#fff}
.sender-badge{background:#1976d2}
.ally-badge{background:#4caf50}
.enemy-badge{background:#f44336}
.change-role-btn{background:#ff9800;color:#fff;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:14px}
.change-role-btn:hover{background:#f57c00}
.send-panel{background:#fff;border:2px solid #1976d2;border-radius:12px;padding:24px;margin-bottom:24px}
.send-title{font-size:20px;color:#1976d2;font-weight:bold;margin-bottom:16px}
.plain-input{width:100%;padding:12px;font-size:16px;border:2px solid #e0e0e0;border-radius:8px}
.plain-input:focus{outline:none;border-color:#4caf50}
.message-textarea{width:100%;min-height:120px;padding:12px;font-size:16px;border:2px solid #e0e0e0;border-radius:8px;resize:vertical;font-family:inherit}
.message-textarea:focus{outline:none;border-color:#1976d2}
.send-button{background:#1976d2;color:#fff;border:none;padding:14px 40px;border-radius:8px;font-size:18px;font-weight:bold;cursor:pointer;width:100%;margin-top:12px}
.send-button:hover{background:#1565c0}
.status-msg{margin-top:12px;text-align:center;font-size:16px;min-height:30px}
.send-history{background:#f5f5f5;border-radius:12px;padding:20px}
.history-title{font-size:18px;color:#555;font-weight:bold;margin-bottom:12px}
.message-list{max-height:300px;overflow-y:auto}
.message-item{background:#fff;border-left:4px solid #1976d2;border-radius:8px;padding:12px;margin-bottom:8px}
.my-message{border-left-color:#4caf50}
.message-time{font-size:12px;color:#999;margin-bottom:4px}
.message-plain{font-size:14px;color:#4caf50;margin-bottom:4px;word-break:break-all}
.message-content{font-size:14px;color:#1976d2;word-break:break-all}
.receive-panel{background:#fff;border-radius:12px;padding:24px}
.receive-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.receive-title{font-size:20px;color:#333;font-weight:bold}
.refresh-btn{background:#4caf50;color:#fff;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:14px}
.refresh-btn:hover{background:#45a049}
.messages-container{max-height:600px;overflow-y:auto}
.message-card{background:#f9f9f9;border:2px solid #e0e0e0;border-radius:12px;padding:16px;margin-bottom:16px}
.message-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sender-label{font-size:14px;color:#1976d2;font-weight:bold}
.message-cipher{background:#fff;border:2px solid #ff9800;border-radius:8px;padding:16px;font-size:18px;color:#333;margin-bottom:12px;word-break:break-all;font-family:monospace}
.message-plain-result{background:#e8f5e9;border:2px solid #4caf50;border-radius:8px;padding:16px;font-size:18px;color:#2e7d32;margin-bottom:12px;word-break:break-all;font-weight:bold}
.decode-btn{background:#ff9800;color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:bold}
.decode-btn:hover{background:#f57c00}
.decode-btn.decoded{background:#4caf50;cursor:default}
.decode-btn.decoded:hover{background:#4caf50}
.decode-modal-content{background:#fff;border-radius:16px;padding:32px;max-width:600px;width:90%;position:relative}
.decode-title{text-align:center;font-size:24px;color:#ff9800;margin-bottom:24px;font-weight:bold}
.decode-body{display:flex;flex-direction:column;gap:20px}
.decode-info{background:#fff3e0;border-radius:8px;padding:16px}
.cipher-display{background:#fff;border:2px solid #ff9800;border-radius:8px;padding:16px;font-size:20px;color:#333;margin-top:8px;word-break:break-all;font-family:monospace;min-height:50px}
.decode-input-area label{font-size:14px;color:#555;font-weight:600;display:block;margin-bottom:8px}
.decode-input{width:100%;padding:12px;font-size:16px;border:2px solid #e0e0e0;border-radius:8px}
.decode-input:focus{outline:none;border-color:#ff9800}
.submit-decode-btn{background:#4caf50;color:#fff;border:none;padding:14px;border-radius:8px;font-size:18px;font-weight:bold;cursor:pointer;width:100%}
.submit-decode-btn:hover{background:#45a049}
.decode-result{text-align:center;font-size:16px;min-height:30px}
.teacher-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:30px}
.stat-card{background:#fff;border:2px solid #e0e0e0;border-radius:12px;padding:24px;text-align:center}
.stat-number{font-size:36px;font-weight:bold;color:#1976d2;margin-bottom:8px}
.stat-label{font-size:14px;color:#666}
.teacher-tabs{display:flex;gap:8px;margin-bottom:20px;border-bottom:2px solid #e0e0e0}
.tab-btn{background:transparent;border:none;padding:12px 24px;font-size:16px;cursor:pointer;color:#666;border-bottom:3px solid transparent;transition:all .3s}
.tab-btn:hover{color:#1976d2}
.tab-btn.active{color:#1976d2;border-bottom-color:#1976d2;font-weight:bold}
.tab-content{animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.table-container{background:#fff;border-radius:12px;padding:20px;overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;min-width:800px}
.data-table thead{background:#f5f5f5}
.data-table th{padding:12px;text-align:left;font-weight:bold;color:#333;border-bottom:2px solid #e0e0e0}
.data-table td{padding:12px;border-bottom:1px solid #f0f0f0}
.data-table tbody tr:hover{background:#fafafa}
.teacher-section{animation:fadeIn .3s}
.decode-record-card{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:#fff;border:2px solid #e0e0e0;border-radius:12px;padding:20px;margin-bottom:20px}
.decode-left{border-right:2px solid #f0f0f0;padding-right:20px}
.decode-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid #f0f0f0}
.send-time{color:#999;font-size:13px}
.decode-content{display:flex;flex-direction:column;gap:12px}
.content-row{padding:10px;background:#f9f9f9;border-radius:8px;line-height:1.6}
.content-row strong{color:#666;margin-right:8px}
.decode-right{padding-left:20px}
.decode-right-header{font-size:18px;font-weight:bold;color:#333;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid #f0f0f0}
.decode-list{display:flex;flex-direction:column;gap:10px}
.decode-item{background:#e8f5e9;border-left:4px solid #4caf50;padding:12px;border-radius:8px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.decode-student{font-weight:bold;color:#2e7d32;font-size:15px}
.decode-time{color:#999;font-size:13px;margin-left:auto}
.clear-btn{background:#f44336;color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:bold;transition:all .3s}
.clear-btn:hover{background:#d32f2f;transform:scale(1.05)}
.lesson-summary{margin-bottom:40px}
.summary-section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:2px solid #e0e0e0}
.summary-section h2{color:#1976d2;font-size:22px;margin-bottom:16px;border-bottom:2px solid #e0e0e0;padding-bottom:12px}
.summary-content{line-height:1.8;font-size:16px;color:#333}
.summary-content p{margin-bottom:16px}
.summary-content strong{color:#c62828;font-weight:bold}
.roles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.role-summary-card{background:#f5f5f5;border-radius:12px;padding:20px;text-align:center;border:2px solid #e0e0e0;transition:all .3s}
.role-summary-card:hover{transform:translateY(-5px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.role-summary-icon{font-size:48px;margin-bottom:12px}
.role-summary-title{font-size:18px;font-weight:bold;color:#333;margin-bottom:8px}
.role-summary-text{font-size:14px;color:#666;line-height:1.6}
.summary-points{display:flex;flex-direction:column;gap:16px;margin-top:20px}
.point-item{display:flex;gap:16px;align-items:flex-start;background:#f9f9f9;padding:16px;border-radius:8px;border-left:4px solid #4caf50}
.point-number{background:#4caf50;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:16px;flex-shrink:0}
.point-content{flex:1;line-height:1.6}
.point-content strong{color:#2e7d32}
.task-instruction{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px;padding:24px;margin-bottom:20px;box-shadow:0 4px 12px rgba(102,126,234,.3)}
.task-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;border-bottom:2px solid rgba(255,255,255,.3);padding-bottom:12px}
.task-icon{font-size:28px}
.task-title{color:#fff;font-size:22px;font-weight:bold}
.task-content{color:#fff;font-size:16px;line-height:1.8;padding:0 0 16px 0}
.task-content p{margin:0}
.task-content strong{color:#ffd700;font-weight:bold;font-size:18px}
.task-action{margin-top:16px;display:flex;align-items:flex-start;gap:8px;padding-left:0}
.action-icon{font-size:20px;flex-shrink:0}
.action-text{color:#fff;font-size:16px;line-height:1.8;flex:1}
.action-text strong{color:#ffd700;font-weight:bold}
.task2-btn{background:#1976d2;color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:bold;transition:all .3s}
.task2-btn:hover{background:#1565c0;transform:scale(1.05)}
.task2-modal-content{background:#fff;border-radius:16px;padding:32px;max-width:700px;width:90%;position:relative}
.task2-title{text-align:center;font-size:26px;color:#1976d2;margin-bottom:24px;font-weight:bold}
.task2-body{display:flex;flex-direction:column;gap:20px}
.task2-role{border:2px solid #e0e0e0;border-radius:12px;overflow:hidden;transition:all .3s}
.task2-role:hover{box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-2px)}
.task2-role-header{padding:16px;display:flex;align-items:center;gap:12px;color:#fff;font-weight:bold;font-size:18px}
.sender-header{background:#1976d2}
.ally-header{background:#4caf50}
.enemy-header{background:#f44336}
.task2-role-content{padding:20px;background:#f9f9f9;font-size:16px;line-height:1.8}
.task2-role-content strong{color:#c62828;font-weight:bold}
.video-float-btn{position:fixed;left:20px;bottom:20px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;padding:14px 24px;border-radius:50px;cursor:pointer;font-size:16px;font-weight:bold;box-shadow:0 4px 15px rgba(102,126,234,.4);transition:all .3s;z-index:999;display:flex;align-items:center;gap:8px}
.video-float-btn:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(102,126,234,.6)}
.video-icon{font-size:20px}
.video-text{font-size:14px}
.video-modal-content{background:#000;border-radius:12px;padding:20px;max-width:900px;width:90%;position:relative}
.video-container{position:relative;width:100%;border-radius:8px;overflow:hidden}
.video-container video{display:block;width:100%;height:auto;background:#000}
@media(max-width:768px){.role-grid{grid-template-columns:1fr;gap:16px}.teacher-stats{grid-template-columns:repeat(2,1fr)}.decode-record-card{grid-template-columns:1fr}.decode-left{border-right:none;border-bottom:2px solid #f0f0f0;padding-right:0;padding-bottom:20px}.decode-right{padding-left:0;padding-top:20px}.roles-grid{grid-template-columns:1fr}}