* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #05070c; font-family: 'Segoe UI', Roboto, sans-serif; }
#wrap { position: relative; width: 100%; height: 100%; }
#game { display: block; width: 100%; height: 100%; cursor: crosshair; }
.hidden { display: none !important; }

/* ---------- Overlays / Menu ---------- */
.overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; z-index: 20;
  background: radial-gradient(ellipse at 50% 30%, #0d1930 0%, #05070c 70%);
}
.overlay h1 {
  font-size: 64px; letter-spacing: 8px; color: #7fd4ff;
  text-shadow: 0 0 30px #1e90ff88, 0 0 4px #fff;
  font-weight: 900;
}
.overlay h1 span { color: #ffd166; margin-left: 14px; }
.tag { color: #8fa3c0; font-size: 15px; margin-top: -10px; }
.menu-box {
  display: flex; flex-direction: column; gap: 12px; min-width: 340px;
  background: #0c1524cc; border: 1px solid #23405f; border-radius: 10px; padding: 26px;
}
.menu-box button, #cmdcard button {
  background: linear-gradient(#1a3350, #10233a); color: #cfe6ff;
  border: 1px solid #2f5a86; border-radius: 6px; padding: 12px 18px;
  font-size: 16px; cursor: pointer; transition: all .12s;
}
.menu-box button:hover { background: linear-gradient(#25476e, #17304e); border-color: #59a7e8; }
.menu-box input {
  background: #0a1220; border: 1px solid #2f5a86; color: #fff; font-size: 26px;
  text-align: center; letter-spacing: 10px; padding: 10px; border-radius: 6px; text-transform: uppercase;
}
.menu-box p { color: #aec6e8; text-align: center; }
.dim { color: #5b7290 !important; font-size: 13px; }
.err { color: #ff7b7b; text-align: center; font-size: 14px; min-height: 18px; }
#room-code { font-size: 42px; letter-spacing: 14px; color: #ffd166; text-align: center; font-weight: bold; }
.help-text { color: #b8cbe4; font-size: 14px; line-height: 1.7; max-width: 460px; }
.help-text ul { margin: 4px 0 8px 22px; }
.help-text kbd { background: #1a3350; padding: 1px 6px; border-radius: 4px; border: 1px solid #2f5a86; }

/* ---------- Configurações ---------- */
#settings-modal { z-index: 40; background: rgba(3,6,12,.72); }
#menu-settings { min-width: 360px; }
#menu-settings h3 { color: #7fd4ff; text-align: center; letter-spacing: 2px; margin-bottom: 4px; }
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #cfe6ff; font-size: 14px; }
.opt-row input[type=range] { width: 160px; accent-color: #59a7e8; }
.opt-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.seg { display: flex; border: 1px solid #2f5a86; border-radius: 6px; overflow: hidden; }
.seg button {
  background: #10233a; color: #8fb4dd; border: none; border-right: 1px solid #2f5a86;
  padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.seg button:last-child { border-right: none; }
.seg button:hover { background: #17304e; }
.seg button.active { background: #2a5a8a; color: #fff; }
#btn-hud-settings {
  margin-left: auto; background: #10233a; color: #cfe6ff; border: 1px solid #2f5a86;
  border-radius: 5px; width: 26px; height: 26px; cursor: pointer; font-size: 13px;
}
#btn-hud-settings:hover { background: #17304e; }
.c-min { color: #7fd4ff; } .c-gas { color: #7dff9a; }
#end-title { font-size: 80px; }
#end-title.defeat { color: #ff6b6b; text-shadow: 0 0 30px #ff000055; }
#end-sub { color: #9fb4d4; font-size: 18px; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
#topbar {
  pointer-events: auto;
  position: absolute; top: 0; right: 0; display: flex; gap: 22px; align-items: center;
  background: #0a121fd9; border-bottom-left-radius: 10px; padding: 8px 18px;
  border-left: 1px solid #23405f; border-bottom: 1px solid #23405f;
  color: #dce9fb; font-size: 16px;
}
.res { display: flex; align-items: center; gap: 6px; }
.ic { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.ic-min { background: linear-gradient(135deg, #9fdcff, #2a7fd4); transform: rotate(45deg); }
.ic-gas { background: linear-gradient(135deg, #a2ffb8, #1da34d); border-radius: 50%; }
.ic-sup { background: linear-gradient(135deg, #ffe29a, #c98a1e); }
#clock { color: #7d93b5; font-size: 14px; }

#bottombar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 230px;
  display: flex; align-items: flex-end; pointer-events: none;
}
#minimap-wrap { display: flex; flex-direction: column; gap: 4px; margin: 0 0 6px 6px; }
#minimap {
  pointer-events: auto; background: #000; margin: 0;
  border: 1px solid #2f5a86; border-radius: 6px; cursor: pointer;
}
.speedbar { pointer-events: auto; align-self: stretch; }
.speedbar button { flex: 1; padding: 4px 0; font-size: 11px; }
#infopanel {
  pointer-events: auto; flex: 1; max-width: 520px; height: 130px; margin: 0 10px 6px 10px;
  background: #0a121fd9; border: 1px solid #23405f; border-radius: 8px;
  padding: 10px; color: #cfe6ff; overflow: hidden; align-self: flex-end;
  display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start;
}
#infopanel .big-name { font-size: 17px; font-weight: bold; width: 100%; color: #9ecbff; }
#infopanel .stat { font-size: 13px; color: #a8bcd8; width: 100%; }
#infopanel .hpbar { width: 100%; height: 8px; background: #22303f; border-radius: 4px; overflow: hidden; }
#infopanel .hpbar > div { height: 100%; background: #48d868; }
#infopanel .queue { display: flex; gap: 4px; width: 100%; margin-top: 4px; }
#infopanel .qitem { background: #17304e; border: 1px solid #2f5a86; border-radius: 4px; font-size: 11px; padding: 3px 6px; }
#infopanel .qbar { width: 100%; height: 6px; background: #22303f; border-radius: 3px; overflow: hidden; margin-top: 4px; }
#infopanel .qbar > div { height: 100%; background: #59a7e8; }
#infopanel .uicon {
  width: 34px; height: 34px; border-radius: 5px; border: 1px solid #2f5a86;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; background: #12233c; cursor: pointer; position: relative;
}
#infopanel .uicon .mini-hp { position: absolute; bottom: 1px; left: 2px; right: 2px; height: 3px; background: #333; }
#infopanel .uicon .mini-hp > div { height: 100%; background: #48d868; }

#cmdcard {
  pointer-events: auto; width: 260px; margin: 0 6px 6px auto; align-self: flex-end;
  background: #0a121fd9; border: 1px solid #23405f; border-radius: 8px; padding: 8px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; min-height: 130px;
}
#cmdcard button {
  padding: 6px 4px; font-size: 12px; min-height: 52px; line-height: 1.25;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
#cmdcard button .hk { color: #ffd166; font-size: 10px; }
#cmdcard button .cost { color: #8fb4dd; font-size: 10px; }
#cmdcard button:disabled { opacity: .35; cursor: default; }
.rally-hint {
  grid-column: 1 / -1; font-size: 10px; color: #ffd166; text-align: center;
  opacity: .75; padding-top: 2px;
}

#alerts {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
#alerts .alert {
  background: #200c0ccc; color: #ffb0b0; border: 1px solid #713333;
  padding: 6px 16px; border-radius: 6px; font-size: 14px; animation: fadeout 3s forwards;
}
#alerts .alert.info { background: #0c1a20cc; color: #a5e2ff; border-color: #2f5a86; }
@keyframes fadeout { 0% {opacity:1} 70% {opacity:1} 100% {opacity:0} }

/* Overlay de rede: espera do oponente / dessincronização */
#net-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 7, 12, 0.62);
}
#net-overlay.hidden { display: none; }
#net-overlay .net-box {
  background: #0a121fee; border: 1px solid #23405f; border-radius: 10px;
  padding: 22px 28px; text-align: center; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
#net-overlay .net-msg { color: #cfe6ff; font-size: 16px; }
#net-overlay .net-quit {
  padding: 8px 18px; font-size: 13px; align-self: center;
  background: #3a1414; color: #ffb0b0; border: 1px solid #713333; border-radius: 6px; cursor: pointer;
}
#net-overlay .net-quit.hidden { display: none; }

/* Estatísticas da tela de fim de jogo */
#end-stats { margin: 4px 0 14px; color: #cfe6ff; }
#end-stats .stat-meta { font-size: 13px; color: #8fb4dd; text-align: center; margin-bottom: 8px; }
#end-stats .stat-table { border-collapse: collapse; margin: 0 auto; font-size: 14px; }
#end-stats .stat-table th { color: #8fb4dd; font-weight: 600; padding: 3px 14px; text-align: right; }
#end-stats .stat-table th:first-child { text-align: left; }
#end-stats .stat-table td { padding: 3px 14px; text-align: right; }
#end-stats .stat-table td:first-child { text-align: left; color: #a8bcd8; }
#end-stats .stat-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }