body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; font-family: sans-serif; background: #87CEEB; }
.screen { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hidden { display: none !important; }
.active { display: flex; }
#player-list { width: 90%; background: #fff; border-radius: 10px; padding: 10px; min-height: 200px; margin-bottom: 20px; }
.player-item { display: flex; align-items: center; margin-bottom: 10px; font-weight: bold; }
.color-box { width: 30px; height: 30px; border-radius: 5px; margin-right: 10px; }
.status-dot { width: 15px; height: 15px; border-radius: 50%; margin-left: auto; background: #FFC107; }
.status-dot.ready { background: #4CAF50; }
#btn-ready { padding: 15px 30px; font-size: 20px; font-weight: bold; background: #4CAF50; color: white; border: 3px solid #000; border-radius: 10px; cursor: pointer; }
#btn-play-again { padding: 15px 30px; font-size: 20px; font-weight: bold; background: #4CAF50; color: white; border: 3px solid #000; border-radius: 10px; cursor: pointer; }
#gameCanvas { display: block; width: 100%; height: 100%; }
.overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 100px; font-weight: bold; color: #FFEB3B; text-shadow: -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000, 4px 4px 0 #000, 0px 8px 15px rgba(0,0,0,0.5); z-index: 10; text-align: center; pointer-events: none; }
.modal { display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); align-items: center; justify-content: center; z-index: 1000; flex-direction: column; }
.modal-content { background: white; padding: 20px; border-radius: 10px; text-align: center; }
.modal-content input { margin: 10px 0; padding: 8px; width: 80%; }
.modal-content button { padding: 8px 16px; cursor: pointer; background: #2196F3; color: white; border: none; border-radius: 5px; }