*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#1a1a2e;color:#e0e0e0;min-height:100vh;padding:16px}
#app{max-width:480px;margin:0 auto}
.screen{display:none;flex-direction:column;gap:12px;animation:fadeIn .3s ease}
.screen.active{display:flex}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.logo{font-size:32px;font-weight:700;text-align:center;color:#fff;margin:20px 0 8px}
.subtitle{text-align:center;color:#888;font-size:14px;margin-bottom:20px}
.header{font-size:20px;font-weight:600;padding:12px 0;border-bottom:1px solid #333;display:flex;justify-content:space-between;align-items:center}
.btn{padding:12px 20px;border:none;border-radius:12px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s;width:100%;text-align:center}
.btn:active{transform:scale(.97)}
.btn.primary{background:#2a9d8f;color:#fff}
.btn.secondary{background:#264653;color:#fff}
.btn.success{background:#2a9d8f;color:#fff}
.btn.danger{background:#e76f51;color:#fff}
.btn.outline{background:transparent;color:#e0e0e0;border:1px solid #444}
.btn.outline:hover{background:#333}
.card{background:#16213e;border-radius:12px;padding:16px;margin-bottom:10px;border-left:4px solid #2a9d8f}
.card-header{font-weight:600;font-size:16px;margin-bottom:6px;color:#fff}
.card-body{font-size:14px;color:#aaa;line-height:1.6}
.card.revealed{border-left-color:#2a9d8f;background:#1a2a3a}
.card.hidden{border-left-color:#666;opacity:.7}
.player-item{display:flex;justify-content:space-between;padding:8px 12px;background:#16213e;border-radius:8px;margin-bottom:6px}
.player-item .name{font-weight:500}
.player-item .status{font-size:12px;padding:2px 10px;border-radius:20px}
.player-item .status.ready{background:#2a9d8f33;color:#2a9d8f}
.player-item .status.waiting{background:#666633;color:#aaa}
.player-item .status.eliminated{background:#e76f5133;color:#e76f51}
#lobbyStatus{text-align:center;padding:8px;background:#16213e;border-radius:8px;font-size:14px;color:#aaa}
#gamePlayers{background:#16213e;border-radius:8px;padding:10px;font-size:14px;line-height:1.8;max-height:150px;overflow-y:auto}
#myCardsContainer{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto;padding:4px 0}
#voteButtons{display:flex;flex-direction:column;gap:8px;margin:12px 0}
#voteButtons .btn{background:#16213e;color:#e0e0e0;border:1px solid #333}
#voteButtons .btn:hover{background:#1a2a3a}
#revealedContainer{max-height:500px;overflow-y:auto}
.revealed-player{background:#16213e;border-radius:12px;padding:12px;margin-bottom:10px}
.revealed-player .player-name{font-weight:600;font-size:16px;margin-bottom:6px}
.revealed-player .card-item{font-size:13px;padding:4px 0;color:#aaa}
.revealed-player .card-item.revealed{color:#2a9d8f}
.revealed-player .card-item.hidden{color:#666}
#disasterText{padding:16px;background:#16213e;border-radius:12px;line-height:1.8}
#statsContent{padding:16px;background:#16213e;border-radius:12px;line-height:2}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#444;border-radius:4px}