/* ===================================
   IMPOSTOR — Design System
   Cores: cinza, vermelho, azul-petróleo
   =================================== */

:root {
  --bg-dark:      #1A1A2E;
  --bg-card:      #16213E;
  --bg-input:     #0F3460;
  --primary:      #1B3A4B;
  --primary-light:#2A5A6E;
  --secondary:    #E63946;
  --secondary-dark:#C5303C;
  --accent:       #F1FAEE;
  --text:         #FFFFFF;
  --text-muted:   #A8DADC;
  --success:      #06D6A0;
  --warning:      #FFD166;
  --danger:       #E63946;
  --glass-bg:     rgba(27,58,75,.35);
  --glass-border: rgba(255,255,255,.12);
  --radius:       14px;
  --shadow:       0 8px 32px rgba(0,0,0,.45);
  --transition:   .3s cubic-bezier(.4,0,.2,1);
}

/* ======= RESET & BASE ======= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  font-size:16px;
  scroll-behavior:smooth;
}

body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg-dark);
  color:var(--text);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Fundo animado: partículas */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 20% 80%,rgba(27,58,75,.35) 0%,transparent 50%),
    radial-gradient(circle at 80% 20%,rgba(230,57,70,.15) 0%,transparent 50%),
    radial-gradient(circle at 50% 50%,rgba(22,33,62,.6)  0%,transparent 70%);
}

/* ======= LAYOUT ======= */
.app-container{
  position:relative;z-index:1;
  min-height:100dvh;
  display:flex;flex-direction:column;
  align-items:center;
  padding:1rem;
}

.screen{
  display:none;width:100%;max-width:520px;
  animation:fadeInUp .45s ease;
}
.screen.active{display:flex;flex-direction:column;gap:1rem}

/* ======= BRANDING ======= */
.brand{text-align:center;margin-bottom:.5rem}
.brand-icon{font-size:3rem;filter:drop-shadow(0 0 12px rgba(230,57,70,.5))}
.brand-title{
  font-size:2rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  background:linear-gradient(135deg,var(--text),var(--secondary));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.brand-sub{font-size:.85rem;color:var(--text-muted);margin-top:.25rem}

/* ======= GLASS CARD ======= */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:1.5rem;
  box-shadow:var(--shadow);
}

/* ======= FORMULÁRIOS ======= */
.form-control,.form-select{
  background:var(--bg-input)!important;
  border:1px solid var(--glass-border)!important;
  color:var(--text)!important;
  border-radius:10px!important;
  padding:.65rem 1rem!important;
  font-size:.95rem;
  transition:border var(--transition),box-shadow var(--transition);
}
.form-control:focus,.form-select:focus{
  border-color:var(--secondary)!important;
  box-shadow:0 0 0 3px rgba(230,57,70,.25)!important;
  outline:none;
}
.form-control::placeholder{color:var(--text-muted)!important;opacity:.7}
.form-label{
  font-weight:600;font-size:.88rem;color:var(--text-muted);
  margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.5px;
}

/* ======= BOTÕES ======= */
.btn{
  border-radius:10px;font-weight:700;letter-spacing:.5px;
  padding:.6rem 1.4rem;transition:all var(--transition);
  text-transform:uppercase;font-size:.88rem;border:none;
}
.btn:active{transform:scale(.96)}

.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-light))!important;
  color:var(--text)!important;
}
.btn-primary:hover{
  box-shadow:0 4px 20px rgba(27,58,75,.5);
  filter:brightness(1.1);
}

.btn-danger{
  background:linear-gradient(135deg,var(--secondary),var(--secondary-dark))!important;
  color:var(--text)!important;
}
.btn-danger:hover{
  box-shadow:0 4px 20px rgba(230,57,70,.4);
  filter:brightness(1.1);
}

.btn-success{
  background:linear-gradient(135deg,var(--success),#05b88a)!important;
  color:#111!important;
}

.btn-outline-light{
  border:1px solid var(--glass-border)!important;
  color:var(--text)!important;background:transparent!important;
}
.btn-outline-light:hover{
  background:rgba(255,255,255,.08)!important;
}

.btn-secondary{
  background:var(--bg-input)!important;
  color:var(--text)!important;
  border:1px solid var(--glass-border)!important;
}

.btn-sm{padding:.4rem .9rem;font-size:.82rem}
.btn-lg{padding:.75rem 2rem;font-size:1rem}

/* ======= BADGES ======= */
.badge-impostor{
  background:var(--secondary);color:#fff;
  padding:.3rem .7rem;border-radius:20px;font-weight:700;font-size:.8rem;
}
.badge-agente{
  background:var(--primary-light);color:#fff;
  padding:.3rem .7rem;border-radius:20px;font-weight:700;font-size:.8rem;
}
.badge-master{
  background:var(--warning);color:#111;
  padding:.2rem .6rem;border-radius:20px;font-weight:700;font-size:.75rem;
}
.badge-connected{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--success);margin-right:6px;
}
.badge-disconnected{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#666;margin-right:6px;
}

/* ======= LISTAS DE JOGADORES ======= */
.player-list{list-style:none;padding:0;margin:0}
.player-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:.65rem .9rem;
  border-bottom:1px solid var(--glass-border);
  transition:background var(--transition);
}
.player-item:last-child{border-bottom:none}
.player-item:hover{background:rgba(255,255,255,.04)}
.player-name{
  font-weight:600;display:flex;align-items:center;gap:.4rem;
}
.player-actions{display:flex;gap:.3rem}

/* ======= LISTA DE LOCAIS ======= */
.location-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:.5rem;
}
.location-chip{
  background:var(--bg-input);
  border:1px solid var(--glass-border);
  border-radius:10px;padding:.5rem .7rem;
  font-size:.85rem;font-weight:600;
  display:flex;align-items:center;gap:.4rem;
  transition:all var(--transition);cursor:default;
}
.location-chip.active{border-color:var(--primary-light);background:rgba(27,58,75,.4)}
.location-chip.highlight{
  border-color:var(--secondary);
  box-shadow:0 0 12px rgba(230,57,70,.3);
  background:rgba(230,57,70,.15);
}
.location-chip .loc-icon{font-size:1.1rem}

.category-badge{
  display:inline-block;
  font-size:.65rem;
  font-weight:600;
  padding:.1rem .4rem;
  border-radius:6px;
  background:rgba(230,57,70,.15);
  color:var(--secondary);
  margin-left:.3rem;
  vertical-align:middle;
  text-transform:uppercase;
  letter-spacing:.5px;
}

/* ======= CONFIG CARDS ======= */
.config-row{
  display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end;
}
.config-row .form-group{flex:1;min-width:120px}

/* ======= TIMER ======= */
.timer-display{
  text-align:center;padding:.8rem;
  border-radius:var(--radius);
  background:var(--bg-input);
  border:2px solid var(--glass-border);
  transition:all .5s ease;
}
.timer-value{
  font-size:3rem;font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:2px;
}
.timer-label{
  font-size:.75rem;text-transform:uppercase;
  color:var(--text-muted);letter-spacing:1px;
}
.timer-display.warning{
  border-color:var(--warning);
  background:rgba(255,209,102,.08);
}
.timer-display.warning .timer-value{color:var(--warning)}
.timer-display.critical{
  border-color:var(--secondary);
  background:rgba(230,57,70,.1);
  animation:timerPulse 1s ease-in-out infinite;
}
.timer-display.critical .timer-value{color:var(--secondary)}

@keyframes timerPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(230,57,70,0)}
  50%{box-shadow:0 0 20px 4px rgba(230,57,70,.3)}
}

.timer-controls{
  display:flex;gap:.4rem;justify-content:center;margin-top:.5rem;
}

/* ======= ROLE CARD (hold to reveal) ======= */
.role-card{
  position:relative;
  width:100%;min-height:180px;
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  user-select:none;-webkit-user-select:none;
}
.role-card-back,.role-card-front{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:1.5rem;
  transition:opacity .35s ease;
  border-radius:var(--radius);
}
.role-card-back{
  background:linear-gradient(135deg,var(--primary),var(--bg-input));
  z-index:2;opacity:1;
}
.role-card-front{z-index:1;opacity:0}
.role-card-front.agent{
  background:linear-gradient(135deg,var(--primary-light),var(--primary));
}
.role-card-front.impostor{
  background:linear-gradient(135deg,var(--secondary),var(--secondary-dark));
}
.role-card.revealed .role-card-back{opacity:0}
.role-card.revealed .role-card-front{opacity:1}

.role-card-icon{font-size:3rem;margin-bottom:.5rem}
.role-card-category{font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:.2rem}
.role-card-word{font-size:1.5rem;font-weight:800;margin-bottom:.3rem;color:var(--accent);text-align:center;line-height:1.3}
.role-card-role{font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;opacity:.8}
.role-card-location{font-size:1.1rem;font-weight:600;margin-top:.3rem;color:var(--accent)}
.role-card-hint{
  font-size:.8rem;color:var(--text-muted);margin-top:.5rem;
  display:flex;align-items:center;gap:.3rem;
}

/* progress ring on hold */
.hold-progress{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  width:36px;height:36px;
}
.hold-progress circle{
  fill:none;stroke:var(--secondary);stroke-width:3;
  stroke-dasharray:100;stroke-dashoffset:100;
  stroke-linecap:round;
  transition:stroke-dashoffset .15s linear;
}

/* ======= VOTING ======= */
.vote-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:.6rem;
}
.vote-card{
  background:var(--bg-input);
  border:2px solid var(--glass-border);
  border-radius:12px;
  padding:.8rem;
  text-align:center;
  cursor:pointer;
  transition:all var(--transition);
  font-weight:600;
}
.vote-card:hover{
  border-color:var(--primary-light);
  background:rgba(27,58,75,.3);
}
.vote-card.selected{
  border-color:var(--secondary);
  background:rgba(230,57,70,.15);
  box-shadow:0 0 16px rgba(230,57,70,.25);
}
.vote-card.voted{opacity:.5;pointer-events:none}
.vote-card .vote-icon{font-size:1.5rem;margin-bottom:.2rem}
.vote-card .vote-name{font-size:.9rem}

/* ======= GUESS LOCATION (impostor) ======= */
.guess-section{
  border-top:1px solid var(--glass-border);
  padding-top:1rem;margin-top:.5rem;
}
.guess-section h6{
  color:var(--secondary);font-weight:700;
  text-transform:uppercase;letter-spacing:1px;font-size:.85rem;
  margin-bottom:.5rem;
}
.location-guess-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:.4rem;
}
.location-guess-chip{
  background:var(--bg-input);
  border:1px solid var(--glass-border);
  border-radius:8px;padding:.4rem .6rem;
  font-size:.82rem;font-weight:600;cursor:pointer;
  text-align:center;transition:all var(--transition);
}
.location-guess-chip:hover{
  border-color:var(--secondary);
  background:rgba(230,57,70,.1);
}
.location-guess-chip.selected{
  border-color:var(--secondary);
  background:rgba(230,57,70,.2);
  box-shadow:0 0 8px rgba(230,57,70,.2);
}

/* ======= RESULT OVERLAY ======= */
.result-overlay{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:fadeIn .3s ease;
  padding:1.5rem;
}
.result-card{
  max-width:420px;width:100%;
  border-radius:var(--radius);
  padding:2rem;text-align:center;
  animation:bounceIn .6s ease;
}
.result-card.agents-win{
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  border:2px solid var(--primary-light);
}
.result-card.impostor-wins{
  background:linear-gradient(135deg,var(--secondary-dark),var(--secondary));
  border:2px solid var(--secondary);
}
.result-icon{font-size:3rem;margin-bottom:.5rem}
.result-title{font-size:1.6rem;font-weight:800;text-transform:uppercase;letter-spacing:2px}
.result-subtitle{font-size:1rem;color:var(--accent);margin-top:.3rem}
.result-details{
  margin-top:1rem;padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.15);
  text-align:left;font-size:.9rem;
}
.result-details p{margin-bottom:.4rem}
.result-votes{margin-top:.8rem}
.result-votes h6{font-weight:700;margin-bottom:.4rem;font-size:.85rem}
.vote-row{
  display:flex;justify-content:space-between;
  padding:.25rem 0;border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.85rem;
}

/* ======= QR CODE ======= */
.qr-container{
  text-align:center;padding:1rem;
  background:var(--bg-input);border-radius:var(--radius);
}
.qr-container canvas,.qr-container img{
  border-radius:10px;max-width:200px;margin:0 auto;
  display:block;
}

/* ======= HEADER BAR ======= */
.top-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:.5rem .8rem;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  backdrop-filter:blur(8px);
}
.top-bar .room-code{
  font-weight:800;letter-spacing:3px;font-size:1.1rem;
  color:var(--secondary);
}
.top-bar .round-info{font-size:.82rem;color:var(--text-muted)}

/* ======= SECTION HEADERS ======= */
.section-title{
  font-size:.9rem;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;color:var(--text-muted);
  margin-bottom:.5rem;
  display:flex;align-items:center;gap:.4rem;
}
.section-title i{color:var(--secondary);font-size:.85rem}

/* ======= TABS ======= */
.tab-btns{
  display:flex;gap:.3rem;padding:.25rem;
  background:var(--bg-input);border-radius:12px;
}
.tab-btn{
  flex:1;padding:.5rem;border:none;border-radius:10px;
  background:transparent;color:var(--text-muted);
  font-weight:700;font-size:.82rem;cursor:pointer;
  text-transform:uppercase;letter-spacing:.5px;
  transition:all var(--transition);
}
.tab-btn.active{
  background:var(--primary);color:var(--text);
  box-shadow:0 2px 8px rgba(27,58,75,.4);
}

/* ======= HISTORY TABLE ======= */
.history-table{width:100%;border-collapse:collapse;font-size:.85rem}
.history-table th{
  text-align:left;padding:.5rem;
  color:var(--text-muted);font-weight:700;
  border-bottom:1px solid var(--glass-border);
}
.history-table td{
  padding:.5rem;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.history-table tr:hover td{background:rgba(255,255,255,.03)}

/* ======= TOAST ======= */
.toast-container{
  position:fixed;top:1rem;right:1rem;z-index:10000;
  display:flex;flex-direction:column;gap:.5rem;
}
.game-toast{
  padding:.7rem 1.2rem;border-radius:10px;
  font-weight:600;font-size:.88rem;
  animation:slideInRight .3s ease;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.game-toast.toast-info{
  background:var(--primary);border-left:4px solid var(--primary-light);
}
.game-toast.toast-warning{
  background:rgba(255,209,102,.15);border-left:4px solid var(--warning);color:var(--warning);
}
.game-toast.toast-danger{
  background:rgba(230,57,70,.15);border-left:4px solid var(--secondary);color:var(--secondary);
}
.game-toast.toast-success{
  background:rgba(6,214,160,.15);border-left:4px solid var(--success);color:var(--success);
}

/* ======= MODAL ======= */
.modal-overlay{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);
  animation:fadeIn .2s ease;
}
.modal-card{
  max-width:400px;width:90%;
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:1.5rem;
  animation:bounceIn .4s ease;
}
.modal-title{font-size:1.1rem;font-weight:800;margin-bottom:1rem}
.modal-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}

/* ======= CONNECTION STATUS ======= */
.connection-bar{
  position:fixed;top:0;left:0;right:0;z-index:10001;
  padding:.5rem;text-align:center;
  font-weight:700;font-size:.85rem;
  transform:translateY(-100%);
  transition:transform .3s ease;
}
.connection-bar.show{transform:translateY(0)}
.connection-bar.disconnected{background:var(--secondary);color:#fff}
.connection-bar.reconnecting{background:var(--warning);color:#111}

/* ======= PRESET CARD ======= */
.preset-btn{
  background:var(--bg-input);
  border:1px solid var(--glass-border);
  border-radius:12px;padding:.7rem 1rem;
  cursor:pointer;text-align:center;
  transition:all var(--transition);
  flex:1;min-width:100px;
}
.preset-btn:hover{
  border-color:var(--primary-light);
  background:rgba(27,58,75,.3);
}
.preset-btn .preset-icon{font-size:1.4rem}
.preset-btn .preset-name{font-weight:700;font-size:.85rem;margin-top:.2rem}
.preset-btn .preset-count{font-size:.75rem;color:var(--text-muted)}

/* ======= ANIMATIONS ======= */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes bounceIn{
  0%{opacity:0;transform:scale(.8)}
  50%{transform:scale(1.03)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes shakeX{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-6px)}
  40%,80%{transform:translateX(6px)}
}

.animate-shake{animation:shakeX .5s ease}

/* ======= SCROLL ======= */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}

/* ======= PWA STANDALONE ======= */
@media(display-mode: standalone){
  body{
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
}

/* ======= RESPONSIVO ======= */
@media(max-width:400px){
  .brand-title{font-size:1.5rem}
  .timer-value{font-size:2.4rem}
  .glass{padding:1rem}
  .location-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .vote-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
}