* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Microsoft YaHei', Arial, sans-serif; color: white; overflow: hidden; height: 100vh; width: 100vw; position: relative; } /* 视频背景 */ .video-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; } #backgroundVideo { width: 100%; height: 100%; object-fit: cover; } /* 玩家面板 */ .players-container { position: relative; width: 100%; height: 100%; pointer-events: none; } .player-panel { position: absolute; background: rgba(0, 0, 0, 0.6); padding: 15px 20px; border-radius: 10px; min-width: 200px; backdrop-filter: blur(5px); transition: all 0.3s ease; } /* 玩家位置定位 */ .player-panel.north { top: 20px; left: 50%; transform: translateX(-50%); background-color: rgba(255, 100, 100, 0.6); } .player-panel.east { top: 50%; right: 20px; transform: translateY(-50%); background-color: rgba(100, 255, 100, 0.6); } .player-panel.south { bottom: 20px; left: 50%; transform: translateX(-50%); background-color: rgba(100, 100, 255, 0.6); } .player-panel.west { top: 50%; left: 20px; transform: translateY(-50%); background-color: rgba(255, 255, 100, 0.6); } .player-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; } .player-name { font-size: 18px; font-weight: bold; } .tenpai-indicator { font-size: 14px; animation: blink 1s infinite; } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.3; } } .player-score { font-size: 24px; font-weight: bold; text-align: center; } /* 游戏信息 */ .game-info { position: absolute; top: 20px; right: 20px; display: flex; gap: 30px; background: rgba(0, 0, 0, 0.7); padding: 10px 20px; border-radius: 20px; } .honba, .riichi { font-size: 18px; font-weight: bold; } /* 胡牌动画 */ .win-animation { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.9); padding: 40px 60px; border-radius: 20px; text-align: center; z-index: 1000; backdrop-filter: blur(10px); animation: winAppear 0.5s ease-out; } @keyframes winAppear { from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .win-text { font-size: 36px; font-weight: bold; margin-bottom: 15px; color: #FFD700; } .win-details { font-size: 24px; margin-bottom: 10px; } .win-score { font-size: 30px; font-weight: bold; color: #FF6B6B; } /* 分数变动指示器 */ .score-change-indicators { position: fixed; pointer-events: none; z-index: 999; width: 100%; height: 100%; } .score-change { position: absolute; font-size: 24px; font-weight: bold; animation: scoreFloat 1.5s ease-out forwards; pointer-events: none; } @keyframes scoreFloat { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-50px); } } /* 控制面板样式(在control.html中使用) */ .control-panel { background: white; color: black; padding: 20px; border-radius: 10px; max-width: 600px; margin: 20px auto; } .control-section { margin-bottom: 25px; padding: 15px; background: #f5f5f5; border-radius: 8px; } .control-section h3 { margin-bottom: 15px; color: #333; } .form-group { margin-bottom: 10px; } .form-group label { display: block; margin-bottom: 5px; font-weight: bold; } .form-group input, .form-group select, .form-group button { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } .form-row { display: flex; gap: 10px; margin-bottom: 10px; } .form-row .form-group { flex: 1; margin-bottom: 0; } .btn { background: #4CAF50; color: white; border: none; cursor: pointer; transition: background 0.3s; } .btn:hover { background: #45a049; } .btn-danger { background: #f44336; } .btn-danger:hover { background: #d32f2f; } .btn-warning { background: #ff9800; } .btn-warning:hover { background: #e68900; } /* 玩家设置表格 */ .player-settings { width: 100%; border-collapse: collapse; margin-bottom: 15px; } .player-settings th, .player-settings td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; } .player-settings input { width: 100%; } /* 响应式调整 */ @media (max-width: 768px) { .player-panel { min-width: 150px; padding: 10px; } .player-name { font-size: 16px; } .player-score { font-size: 20px; } .game-info { top: 10px; right: 10px; flex-direction: column; gap: 10px; } }`,"rewrite":false}}}