/* modern dark UI */
:root{--bg:#0f1724;--card:#0b1220;--muted:#9aa4b2;--accent:#6ee7b7;--danger:#ef4444;--glow:#3b82f6}
*{box-sizing:border-box}
button{outline:none !important;-webkit-appearance:none !important;-webkit-tap-highlight-color:transparent !important}
button:focus{outline:none !important;box-shadow:none !important}
button:focus-visible{outline:none !important;box-shadow:none !important}
html{height:100%;width:100%;margin:0;padding:0;overflow:hidden}
body{font-family:system-ui;background:#0f1724;color:#e6eef6;padding:12px;margin:0;width:100%;height:100%;overflow:auto;-webkit-user-select:none;user-select:none}
.app{width:100%;min-height:100%;display:flex;justify-content:center;align-items:center;padding:12px 0}
.hidden{display:none!important}
.card{background:#0b1220;padding:16px;border-radius:12px;margin-bottom:12px;width:100%;max-width:600px}
.button-primary{background:#6ee7b7;border:none;padding:12px 14px;border-radius:8px;font-weight:600;cursor:pointer;transition:all 0.2s;color:#0b1220;font-size:1rem;width:100%;display:block;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline:none;-webkit-appearance:none}
.button-primary:hover{background:#5ad9a8;transform:translateY(-2px);box-shadow:0 8px 20px rgba(106,231,183,0.3)}
.button-primary:active{transform:translateY(0)}
.player-list{list-style:none;padding:0;margin:0}
.player-list li{padding:12px;background:rgba(255,255,255,0.05);border-radius:8px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;font-size:0.95rem}

/* Lobby styling */
.game-header{text-align:center;margin-bottom:30px}
.game-title{font-size:2rem;margin:0 0 10px 0;color:#6ee7b7;text-shadow:0 0 20px rgba(110,231,183,0.2)}
.game-subtitle{color:#9aa4b2;margin:0;font-size:0.85rem;line-height:1.5}
.form-section{margin-bottom:25px}
.form-section h2{font-size:1.1rem;margin:0 0 12px 0;color:#e6eef6}
.divider{text-align:center;color:#9aa4b2;margin:20px 0;font-weight:600;font-size:0.9rem}
.input{width:100%;padding:12px;margin-bottom:10px;background:#0f1724;border:1px solid #6ee7b7;border-radius:8px;color:#e6eef6;font-size:1rem;display:block}
.input:focus{outline:none;border-color:#5ad9a8;box-shadow:0 0 10px rgba(106,231,183,0.2)}

.lobby-header{text-align:center;margin-bottom:25px}
.room-code-display{font-size:0.95rem;color:#6ee7b7;font-weight:600;margin-top:10px}
.code-highlight{background:rgba(110,231,183,0.1);padding:4px 12px;border-radius:6px;font-family:monospace;font-size:1.1rem;letter-spacing:2px}

.emoji-picker-section{background:rgba(255,255,255,0.05);padding:16px;border-radius:12px;border:1px solid rgba(106,231,183,0.2);margin-bottom:20px}
.emoji-picker-section h3{margin:0 0 12px 0;color:#6ee7b7;text-align:center;font-size:1rem}
.emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.emoji-option{width:100%;aspect-ratio:1;border:2px solid transparent;border-radius:8px;background:#0f1724;cursor:pointer;font-size:1.5rem;display:flex;align-items:center;justify-content:center;transition:all 0.2s;padding:0;min-width:40px}
.emoji-option:hover:not(.disabled){border-color:#6ee7b7;transform:scale(1.1);box-shadow:0 0 15px rgba(110,231,183,0.3)}
.emoji-option.disabled{opacity:0.3;cursor:not-allowed;background:rgba(0,0,0,0.3)}
.emoji-option.selected{border-color:#6ee7b7;background:rgba(110,231,183,0.2);box-shadow:0 0 15px rgba(110,231,183,0.4)}

.players-section{margin-bottom:20px}
.players-section h3{margin:0 0 12px 0;color:#6ee7b7;font-size:1rem}
.button-start{width:100%;padding:14px;font-size:1rem}

/* Round intro animation */
.round-intro-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(15,23,36,0.95);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeOut 0.5s 2s forwards}
.round-intro-content{text-align:center}
.round-number{font-size:3rem;font-weight:800;color:#6ee7b7;animation:scaleIn 0.6s cubic-bezier(0.34,1.56,0.64,1)}

/* Round container */
.round-container{width:100%;max-width:600px;margin:0 auto;padding:16px}
.round-title{text-align:center;font-size:1.5rem;font-weight:700;margin:0 0 30px 0;color:#6ee7b7;text-shadow:0 0 20px rgba(110,231,183,0.3)}

/* Round main area */
.round-main{text-align:center;margin-bottom:30px}
.timer-display{margin-bottom:25px}
.timer-value{font-size:2.5rem;font-weight:800;color:#fff;line-height:1}
.timer-label{font-size:0.85rem;color:#9aa4b2;text-transform:uppercase;letter-spacing:1px;margin-top:5px}

/* Press button */
.press-button{position:relative;width:160px;height:160px;border-radius:50%;border:none;background:linear-gradient(145deg,#3b82f6,#2563eb);cursor:pointer;font-size:1.2rem;font-weight:800;color:#fff;box-shadow:0 10px 40px rgba(59,130,246,0.4),0 0 0 0 rgba(59,130,246,0.5);transition:all 0.15s cubic-bezier(0.4,0,0.2,1);overflow:hidden;margin:0 auto;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline:none;-webkit-appearance:none}
.press-button:hover{transform:scale(1.05);box-shadow:0 15px 50px rgba(59,130,246,0.6),0 0 0 0 rgba(59,130,246,0.5)}
.press-button:active,.press-button.pressed{transform:scale(0.95);box-shadow:0 5px 20px rgba(59,130,246,0.3),0 0 0 20px rgba(59,130,246,0)}
.press-button.pressed{animation:pressRipple 0.6s ease-out}
.button-glow{position:absolute;top:10%;left:10%;width:80%;height:80%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.3) 0%,transparent 70%);pointer-events:none}
.button-text{position:relative;z-index:1;-webkit-user-select:none;user-select:none}

/* Round description */
.round-description{margin-top:20px;padding:16px;background:rgba(255,255,255,0.05);border-radius:12px;border-left:4px solid #ef4444;color:#e6eef6;line-height:1.6;font-size:0.9rem;text-align:left}

/* Player stats */
.player-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat-item{background:rgba(255,255,255,0.05);padding:16px;border-radius:12px;text-align:center}
.stat-label{color:#9aa4b2;font-size:0.75rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.stat-value{font-size:1.5rem;font-weight:800;color:#6ee7b7;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.stat-value.stat-bump{animation:statBump 0.3s cubic-bezier(0.34,1.56,0.64,1)}

@keyframes fadeOut{to{opacity:0;pointer-events:none}}
@keyframes scaleIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes pressRipple{0%{box-shadow:0 5px 20px rgba(59,130,246,0.3),0 0 0 0 rgba(59,130,246,0.5)}100%{box-shadow:0 5px 20px rgba(59,130,246,0.3),0 0 0 40px rgba(59,130,246,0)}}
@keyframes statBump{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}

/* Score animation styles */
.score-table{margin:16px auto;position:relative;max-width:90%;text-align:center}
.score-row{display:flex;align-items:center;padding:10px;margin-bottom:6px;background:rgba(255,255,255,0.05);border-radius:8px;will-change:transform;font-size:0.9rem;justify-content:space-between}
.player-name{flex:1;font-weight:600;text-align:left}
.score-value{min-width:80px;text-align:right;font-size:1.1em;transition:color 0.3s ease}
.score-delta{min-width:80px;text-align:right;font-weight:700;font-size:1.1em;color:#6ee7b7;opacity:0}
.score-delta.animate-delta{animation:deltaFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards}
.score-value.score-updated{color:#6ee7b7;pointer-events:none}

@keyframes deltaFadeIn{0%{opacity:0;transform:translateY(-10px)}50%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}

/* Choice buttons (Round 2, 6) */
.choice-buttons{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:25px 0}
.choice-buttons.vertical{grid-template-columns:1fr;gap:12px}
.choice-button{background:rgba(255,255,255,0.08);border:2px solid rgba(255,255,255,0.15);padding:16px;border-radius:12px;cursor:pointer;transition:all 0.2s;text-align:left;font-size:0.9rem;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline:none;-webkit-appearance:none}
.choice-button:hover:not(:disabled){background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.3);transform:translateY(-2px)}
.choice-button:disabled{opacity:0.5;cursor:not-allowed}
.choice-button .button-text{display:block;font-size:1rem;font-weight:700;margin-bottom:6px;color:#fff}
.choice-button .button-desc{display:block;font-size:0.75rem;color:#9aa4b2;line-height:1.3}
.choice-button.cooperate{border-color:#6ee7b7}
.choice-button.cooperate:hover:not(:disabled){border-color:#6ee7b7;background:rgba(110,231,183,0.1)}
.choice-button.snitch,.choice-button.betray{border-color:#ef4444}
.choice-button.snitch:hover:not(:disabled),.choice-button.betray:hover:not(:disabled){border-color:#ef4444;background:rgba(239,68,68,0.1)}
.choice-button.eliminate{border-color:#f59e0b}
.choice-button.eliminate:hover:not(:disabled){border-color:#f59e0b;background:rgba(245,158,11,0.1)}

.choice-confirm{margin-top:16px;padding:12px;background:rgba(110,231,183,0.1);border:2px solid #6ee7b7;border-radius:8px;font-size:0.9rem}
.confirm-text{text-align:center;font-weight:600}

/* Bid buttons (Round 3) */
.auction-info{margin-bottom:25px}
.auction-question{font-size:1.1rem;font-weight:600;color:#fff;text-align:center}
.bid-buttons{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:16px 0}
.bid-button{background:linear-gradient(145deg,#3b82f6,#2563eb);border:none;padding:20px;border-radius:12px;cursor:pointer;transition:all 0.2s;box-shadow:0 5px 20px rgba(59,130,246,0.3);font-size:0.9rem;outline:none;-webkit-appearance:none}
.bid-button:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(59,130,246,0.5)}
.bid-button:active,.bid-button.pressed{transform:scale(0.95)}
.bid-amount{font-size:1.3rem;font-weight:800;color:#fff}
.current-bid{margin:16px 0;padding:16px;background:rgba(255,255,255,0.05);border-radius:12px;text-align:center}
.bid-label{color:#9aa4b2;font-size:0.75rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.bid-value{font-size:2rem;font-weight:800;color:#6ee7b7}

/* Round 4 - All in */
.press-button.allin{background:linear-gradient(145deg,#ef4444,#dc2626);box-shadow:0 10px 40px rgba(239,68,68,0.4),0 0 0 0 rgba(239,68,68,0.5)}

/* Responsive for larger screens */
@media (min-width:480px) {
  body{padding:16px}
  .game-title{font-size:2.2rem}
  .press-button{width:180px;height:180px;font-size:1.3rem}
  .timer-value{font-size:2.8rem}
  .score-row{font-size:0.95rem}
  .choice-button{font-size:0.95rem;padding:18px}
  .choice-button .button-text{font-size:1.05rem}
}

@media (min-width:640px) {
  body{padding:20px}
  .card{padding:20px}
  .game-title{font-size:2.5rem}
  .game-header{margin-bottom:40px}
  .press-button{width:200px;height:200px;font-size:1.5rem}
  .timer-value{font-size:3rem}
  .form-section{margin-bottom:30px}
  .divider{margin:30px 0}
  .emoji-grid{gap:10px}
  .emoji-option{font-size:2rem}
  .score-row{font-size:1rem}
  .choice-button{font-size:1rem;padding:20px}
  .choice-button .button-text{font-size:1.2rem;margin-bottom:8px}
  .choice-button .button-desc{font-size:0.85rem}
  .round-title{font-size:2rem;margin-bottom:40px}
  .round-description{margin-top:30px;padding:20px;font-size:0.95rem}
  .stat-item{padding:20px}
  .stat-label{font-size:0.85rem}
  .stat-value{font-size:2rem}
  .current-bid{padding:20px}
  .bid-value{font-size:2.5rem}
}

/* Dark mode safe */
@media (prefers-color-scheme:dark) {
  body{color:#e6eef6}
}

/* Landscape mode adjustments */
@media (max-height:600px) {
  .game-header{margin-bottom:20px}
  .round-container{padding:12px}
  .round-title{margin-bottom:25px}
  .press-button{width:140px;height:140px}
  .timer-value{font-size:2rem}
}

/* High DPI screens */
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi) {
  .press-button{box-shadow:0 15px 50px rgba(59,130,246,0.5),0 0 0 0 rgba(59,130,246,0.5)}
}

/* Score animation styles */
.score-table{margin-top:20px;position:relative}
.score-row{display:flex;align-items:center;padding:12px;margin-bottom:8px;background:rgba(255,255,255,0.05);border-radius:8px;will-change:transform}
.player-name{flex:1;font-weight:600}
.score-value{min-width:100px;text-align:right;font-size:1.2em;transition:color 0.3s ease}
.score-delta{min-width:100px;text-align:right;font-weight:700;font-size:1.3em;color:#6ee7b7;opacity:0}
.score-delta.animate-delta{animation:deltaFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards}
.score-value.score-updated{color:#6ee7b7;pointer-events:none}

@keyframes deltaFadeIn{
  0%{opacity:0;transform:translateY(-10px)}
  50%{opacity:1;transform:translateY(0)}
  100%{opacity:1;transform:translateY(0)}
}



.choice-confirm{margin-top:20px;padding:15px;background:rgba(110,231,183,0.1);border:2px solid #6ee7b7;border-radius:8px}
.confirm-text{text-align:center;font-weight:600}

/* Bid buttons (Round 3) */
.auction-info{margin-bottom:30px}
.auction-question{font-size:1.3rem;font-weight:600;color:#fff;text-align:center}
.bid-buttons{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}
.bid-button{background:linear-gradient(145deg,#3b82f6,#2563eb);border:none;padding:30px;border-radius:12px;cursor:pointer;transition:all 0.2s;box-shadow:0 5px 20px rgba(59,130,246,0.3)}
.bid-button:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(59,130,246,0.5)}
.bid-button:active,.bid-button.pressed{transform:scale(0.95)}
.bid-amount{font-size:1.5rem;font-weight:800;color:#fff}
.current-bid{margin:20px 0;padding:20px;background:rgba(255,255,255,0.05);border-radius:12px;text-align:center}
.bid-label{color:#9aa4b2;font-size:0.9rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.bid-value{font-size:2.5rem;font-weight:800;color:#6ee7b7}

/* Round 4 - All in */
.press-button.allin{background:linear-gradient(145deg,#ef4444,#dc2626);box-shadow:0 10px 40px rgba(239,68,68,0.4),0 0 0 0 rgba(239,68,68,0.5)}
.press-button.allin:hover{box-shadow:0 15px 50px rgba(239,68,68,0.6),0 0 0 0 rgba(239,68,68,0.5)}
.press-button.allin.pressed-permanent{background:linear-gradient(145deg,#16a34a,#15803d);box-shadow:0 10px 40px rgba(22,163,74,0.4)}
.allin-status{margin-top:20px;padding:15px;background:rgba(22,163,74,0.1);border:2px solid #16a34a;border-radius:8px}
.status-text{color:#16a34a;font-weight:700;font-size:1.2rem;text-align:center}

/* Round 5 - Attack */
.richest-info{margin:30px 0;padding:25px;background:rgba(245,158,11,0.1);border:2px solid #f59e0b;border-radius:12px;text-align:center}
.richest-label{font-size:0.9rem;color:#9aa4b2;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.richest-name{font-size:1.8rem;font-weight:800;color:#f59e0b}
.press-button.attack{background:linear-gradient(145deg,#ef4444,#dc2626);box-shadow:0 10px 40px rgba(239,68,68,0.4)}
.press-button.attack:hover{box-shadow:0 15px 50px rgba(239,68,68,0.6)}
.spectator-message{margin:30px 0;padding:30px;background:rgba(255,255,255,0.05);border-radius:12px}
.spectator-text{font-size:1.2rem;color:#9aa4b2;text-align:center;font-style:italic}

/* Round 6 - Subround */
.subround-indicator{text-align:center;font-size:1rem;color:#9aa4b2;margin:-20px 0 20px 0;text-transform:uppercase;letter-spacing:1px}
.subround-results,.auction-results{margin:20px 0}
.results-table{width:100%;border-collapse:collapse;background:rgba(255,255,255,0.05);border-radius:8px;overflow:hidden}
.results-table th{background:rgba(255,255,255,0.1);padding:12px;text-align:left;font-weight:600;color:#9aa4b2;font-size:0.85rem;text-transform:uppercase;letter-spacing:1px}
.results-table td{padding:12px;border-top:1px solid rgba(255,255,255,0.05)}
.results-table tr.winner{background:rgba(110,231,183,0.1)}
.results-table tr.winner td{color:#6ee7b7;font-weight:700}
.choice-cooperate{color:#6ee7b7}
.choice-betray{color:#ef4444}
.choice-eliminate{color:#f59e0b}
.positive{color:#6ee7b7;font-weight:600}
.negative{color:#ef4444;font-weight:600}
.eliminated-notice{margin:20px 0;padding:15px;background:rgba(239,68,68,0.1);border:2px solid #ef4444;border-radius:8px;color:#ef4444;font-weight:600;text-align:center}
.continue-notice{margin:20px 0;padding:15px;text-align:center;color:#9aa4b2;font-style:italic}